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. e.g. as
const ProductsComponent =()=>
{
return(
<main className="products">
<Header>Products</Header>
<div className="content">
</div>
</main>
);
};
How can I do it?
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>);
}
You should write Header component like this
const Header =(props)=>{
return(<div>
<h1> {props.children || 'Top Header'}</h1>
</div>);
}