Children in JSX in React
JSX expression in react contains both an opening and closing tags, and the content between those tags is passed as a special props that is props.children.
Ex – <Tutorial> Learn Online ReactJS from Share Query </Tutorial>
Let us understand by an example
Tutorial.js
import React from "react"; //Function based component... const Tutorial = props => { return <h1>Learn Online ReactJS Tutorial. {props.children}</h1> } export default Tutorial;
index.js
import React from "react"; import ReactDOM from "react-dom"; import Tutorial from './Tutorial'; //Rendering component... ReactDOM.render(<Tutorial>I am learning from Share Query.</Tutorial>, document.getElementById("root"));