Passing props to a React component

We’ll use a basic header component for this example.

Create a new component in the /src/components/ folder (if you have one, if not then create one):

Add the following code to the component (In Header.js):

const Header = (props) => {
  return (
    <header>
       <h1>{props.title}</h1>
    </header>
  )
}

export default Header

Then in App.js import the header component:

import Header from './components/Header'

Add the header component to the JSX and define the title prop:

<Header title="Hello"/>

Putting it all together, your App.js should look like this:

import Header from './components/Header'

function App() {
  return (
    <div className="container">
      <Header title="Hello"/>
    </div>
  );
}

export default App;