Reusing Custom React Components by Passing Data Down as Props

To pass data from a parent react component to a child react component, we can supply "attributes" to the JSX tags like:

<Greeting name="React" />

That name attribute is then available in the Greeting component as a prop (which is an object passed in as the first argument to the react function component.

That means we can display that name from the props argument like this:

function Greeting(props) {
  return(<p>{props.name}</p>)
}

And so you can customize any react component by passing data down in the form of that props argument.