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"));