Props

React Props are like function arguments in JavaScript and attributes in HTML.

To send props into a component, use the same syntax as HTML attributes:

<Car brand="Mercedes" />

The component receives the argument as a props object:

class Car extends React.Component {
	render() {
		return <h2>I am a {this.props.brand}!</h2>;
	}
}

If we need to pass data from a parent component to a child component we can do it this way:

class Car extends React.Component {
	render() {
		return <h2>I am a {this.props.brand}!</h2>;
	}
}

class Garage extends React.Component {
	render() {
		return (
			<div>
				<h1>Who lives in my garage?</h1>
				<Car brand="Ford" />
			</div>
		);
	}
}
ReactDOM.render(<Garage />, document.getElementById('root'));

WARNING

React Props are read-only! You will get an error if you try to change their value.

Props in the constructor

When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs.