What are Props?

Hrishi Mittal
Props are a way to pass data to React components. Since React components can be thought of as functions, props are the arguments we can pass to them.

For example, in our Hello component, instead of showing “Hello, World!”, say we want to pass a value, a name of a person to this component.

We can do that in React with props.

So let’s change our code now to see how this would work.

function Hello(props) {
  return <h1>Hello, {props.name}!</h1>
}
Functional React components take a props argument by default, the value for which we can pass when using that component.

Let’s change the ReactDOM.render call by passing a prop called name to Hello, with the value ‘John’:

ReactDOM.render(<Hello name='John' />, document.getElementById('app'))
You can see the full code in this codepen.

Now, the web page displays “Hello, John!” instead of “Hello, World!”.

So, props are a simple way for passing data to components.

They can be used inside curly braces {} in the JSX code.

In a class component, we can access props using this.props:

class Hello extends React.Component {
  render () {
    return (
      <h1>Hello, {this.props.name}!</h1>
    )
  }
}