Children props in React
props.children is used to add data between JSX tags.
Example:
const NavBar =(props) => {
return(
<div>
{props.children}
</div>
);
}
You can also define it using destructuring of props
const Navbar =({children}) => {
return(
<div>
{children}
</div>
);
}
export default Navbar;
App.js
const App = () =>{
return(
<Navbar>
<a href="#">Home</a>
<a href="#">HTML</a>
<a href="#">JAVA</a>
</nav>
</Navbar>
);
}
Notice here we have passed nav inside Navbar component which will be considered as children i.e. anything defines under opening and closing tag will be considers as a children.
Comments
Post a Comment