React Native Get A Props Value

React Native Get A Props Value

Getting a value of a certain prop can be done in several ways in React Native. Here are some ways on how to achieve it:

Using this.props

The simplest way to get a value of a prop is by accessing it through the this.props object. This object contains all the props passed to the component. For example:

class MyComponent extends React.Component {
  render() {
    const { myProp } = this.props;
    return (
      <View>
        <Text>Value of myProp: {myProp}</Text>
      </View>
    );
  }
}

// Usage
<MyComponent myProp="hello world" />

In the example above, the value of myProp can be accessed by this.props.myProp, but for convenience, it was destructured to a constant variable for easier usage inside the component.

Using destructuring assignment in function arguments

In functional components, you can use the destructuring assignment directly in the function arguments to retrieve the value of the prop. For example:

function MyFunctionalComponent({ myProp }) {
  return (
    <View>
      <Text>Value of myProp: {myProp}</Text>
    </View>
  );
}

// Usage
<MyFunctionalComponent myProp="hello world" />

In this example, the value of myProp is retrieved by destructuring the arguments object passed to the function.

Using defaultProps

defaultProps is a property that can be set on a component to specify default values for its props. If a prop is not passed to the component, it will use its default value. Here's an example:

class MyComponent extends React.Component {
  static defaultProps = {
    myProp: "default value"
  }

  render() {
    const { myProp } = this.props;
    return (
      <View>
        <Text>Value of myProp: {myProp}</Text>
      </View>
    );
  }
}

// Usage
<MyComponent />

In this example, if myProp is not passed to the component, it will use the default value of "default value".