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".