Props in React Js

Have you wondered how do you pass information from one component to another? Well, let’s find out the answer to this in the next video and make the header display different content dynamically on different pages.

Now, you need to foster the understanding of this concept in your Phone Directory application by displaying the header text dynamically on different pages. You'll also see how you can use props  inside a functional as well as a class component.

Props help you to pass values from a parent component to a child component so that they can be accessed within the child component.

Props in a functional component:  

A functional component accepts a parameter called props from the parent component. This parameter is an object that holds all the properties passed from the parent component to the child component. In place of props, you can use any other parameter name too.

Example:

const Organization = function(props) {
   return (
      <div>
         <h1>{props.name}</h1>
	 <h3>{props.tagline}</h3>
     </div>
   )
}

<Organization name="UpGrad" tagline="Building Careers of Tomorrow"/>

Props in a class component:

The properties passed from the parent component can be accessed using this.props keyword. Note that in class components, you need to use the keyword props only, unlike the case in functional components where any parameter name can be used to represent the props of the component.

Example:

class Organization extends Component {
   render() {
      return (
         <div>
            <h1>{this.props.name}</h1>
            <h3>{this.props.tagline}</h3>
         </div>
       )
   }
}

<Organization name="UpGrad" tagline="Building Careers of Tomorrow"/>

At this stage, commit your code with “Passed heading to Header component as props” as the commit message. In order to view the diff, click here.