Props: passing data to a component — Components, JSX and state

Props

Components receive data through props (properties), like the attributes of a tag. Props arrive as an object, the first parameter of the function:

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

The common approach is to destructure the props directly:

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

And you use them by passing them as attributes:

<Greeting name="Ann" />
<Greeting name="Louis" />

Props are read-only: a component should not modify its props. They serve to configure it from the outside and reuse it with different data.