props in ReactJS

While working with a component in ReactJS, you need to pass some data to the component. props in ReactJS is used to do that. You can use props object in component to get the data that has been passed.
Passing props to the component can be considered same as passing arguments to function since component in ReactJS is pure function.
Props are immutable.

props of a stateful component in ReactJS

To pass the data to the stateful component (a component that has been created using Class ), please have a look at the below example.


import React from 'react';
import ReactDOM from 'react-dom';

class Greetings extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            visitorName: props.initialName
        };
        this.onChange = this.onChange.bind(this);
        this.onButtonClick = this.onButtonClick.bind(this);
    }
    onChange(e){
        const {name, value} = e.target;
        this.setState({
            [name]: value
        });
    }
    onButtonClick(e){
        const {sayHello} = this.props;
        const { visitorName } = this.state;
        sayHello(visitorName);
    }
    render(){
        const { visitorName } = this.state;
        return (
            <div>
                <input name="visitorName" type="text" value={visitorName} onChange = {this.onChange} />
                <button onClick={this.onButtonClick}>Say hello</button>
            </div>
        );
    }
}

class Parent extends React.Component{
    constructor(props){
        super(props);
        this.onHello = this.onHello.bind(this);
    }
    onHello(name){
        alert(`Hello ${name}`);
    }
    render(){
        return (
            <div>
                <Greetings initialName="Stranger" sayHello={this.onHello} />
            </div>
        );
    }
}

ReactDOM.render(
    <Parent />,
    document.getElementById('root')
);
                    

Open above code in codepen.

In above code, you can see, we have passed two props 1) initialName, a String and 2) sayHello a function to Greetings component from Parent component.
These two properties are added to props object of Greetings component and passed to constructor as a parameter. This props object can be used in Greetings component by this.props object.

props of a stateless component in ReactJS

let us see by example how to pass props in a stateless component.


const Greetings = (props) => {
  return(
    <div>
      Hello, {props.name}
      <br/>
      <br/>
      <button onClick={e=>{props.sayHello(props.name)}}>Say Hello Outloud</button>
    </div>
  );
};

class Parent extends React.Component{
    constructor(props){
        super(props);
        this.onHello = this.onHello.bind(this);
    }
    onHello(name){
        alert(`Hello ${name}`);
    }
    render(){
        return (
            <div>
                <Greetings name="Learner" sayHello={this.onHello} />
            </div>
        );
    }
}

ReactDOM.render(
    <Parent />,
    document.getElementById('root')
);
                    

Open above code in codepen.

In above code, in stateless component Greetings, props are passed as a function parameter which can be used by the component to get the properties.

Conclusion

In this section, we have learned about props in ReactJS.
In the next section, you will learn about defaultProps of component in ReactJS.