Props

Props help us to pass the data to the child components or we can contact child components by using props.

How to use Props in React?

Stateless Components

function Boo(props){

    return <div>{props.name}</div> //declaring the props
}

Passing data to the props.

<Boo name={'Guest'} />

Statefull Components

class Boo extends React.Component{
    constructor(props){
      super(props);
      this.state = {name:"User"}
    }

    render(){
        return <div>{this.props.id} {this.state.name}</div>
    }
}
<Boo id={1} />

In Stateful Components we need to pass the props to the constructor method. where this keyword refers to the current component.

Uses of props

  • Props are Immutable
  • By using the props you can easily pass data to the child components.