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>

                         <nav>
                              <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.


Continue Learning: Events in React

Comments

Popular Posts