children prop

Children Props

  • You can pass children to the child component
  • In the parent component when we pass data , the things inside the component behaves as children.
  • Highlighted below is the children
  • <Batsman id=”1″ name=”SKY”>
            <p>This is a special player!!!</p>
    </Batsman>
 
				
					import React from "react";

const Cricket = () => {
  return (
    <>
      <Batsman id="1" name="SKY">
        <p>This is a special player!!!</p>
      </Batsman>
      <Batsman id="2" name="R Ashwin"></Batsman>
      <Batsman id="3" name="Axar Patel"></Batsman>
      <Batsman id="4" name="Ishan Kishan">
        <p>This is a special player!!!</p>
      </Batsman>
    </>
  );
};

const Batsman = ({ id, name, children }) => {
  return (
    <div>
      <ul>
        <li>{id}</li>
        <li>{name}</li>
        {children}
        <hr></hr>
      </ul>
    </div>
  );
};
export default Cricket;

Leave a Comment