JavaScript by Example

Props

Props are data passed to a react component from a parent component. Props are similar to states except that props are read-only. You should not change props of a component from within the component itself. For example, consider the following component:

class ParentComponent extends Component {  render() {    return (      <ChildrenComponent name={'World'} />    )  }}class ChildrenComponent extends Component {  render() {    return (      <h1>Hello {this.props.name}!</h1>    )  }}

Here, the name attribute passed to ChildrenComponent element inside the render method of ParentComponent has become a prop for the ChildrenComponent. This prop should not be changed by the ChildrenComponent. However, if the value is changed from the ParentComponent, the ChildrenComponent ...