How to pass a value to a React prop

Question

I have a components: Header

const Header =()=>

{
return(
<div>

<h1> Top Header </h1>

</div>);

}

And 3 other components: C1, C2, C3.

What I want is to use the component Header as the header for all three components, but with different text in the tags for each component C1, C2, C3.

I tried passing it as props but didnt work out. eg as

const ProductsComponent =()=>
{
    return(
        <main className="products">
            <Header>Products</Header>
            <div className="content">
                
            </div>
            
        </main>
    );
};

How can I do it?

Answer 1

You should write Header component like this

const Header =(props)=>{
return(<div>
           <h1> {props.children || 'Top Header'}</h1>
       </div>);
}

Answer 2

You are currently not passing any props to your Header component, you'd have to do it like this:

const ProductsComponent =()=>
{
    return(
        <main className="products">
            <Header tag="Products"/>
            <div className="content">
                
            </div>
            
        </main>
    );
};

Then you're Header component would have to look like this:

const Header =(props)=>

return(
<div>

<h1> Top Header </h1>
{props.tag}
</div>);

}

Or you could destructre tags out of your props like this:

const Header =({ tag })=>

return(
<div>

<h1> Top Header </h1>
{tag}
</div>);

}