Thursday, January 31, 2019

React-native what is a prop to a Component

Props are short for Properties. The simple rule of thumb is props should not be changed. In the programming world we call it “Immutable” or in simple english “Unchangeable”

Components receive props from their parent. These props should not be modified inside the component. In React and React Native the data flows in one direction -> From the parent to the child

You can write your own components that use props. The idea behind props is that you can make a single component that is used in many different places in your app. The parent that is calling the component can set the properties, which could be different in each place.


// Parent
export default class ScreenOne extends React.Component {
  render () {
    return (
    
          
    

    )
  }
}

// Child component
export default class Heading extends React.Component {
  render () {
    return (
     
        {this.props.message}
     

    )
  }
}
Heading.propTypes = {
  message: PropTypes.string
}
Heading.defaultProps = {
  message: 'Heading One'
}

References:
https://codeburst.io/props-and-state-in-react-native-explained-in-simple-english-8ea73b1d224e


No comments:

Post a Comment