React Children
Overview
In React, we have props by which we can pass some data from one component of React application to the other component of the same React application. React children is also a react prop which is declared in react by default. This prop contains the content which is written in between the opening (<>) and closing (</>) tags where the component was called. In this article, we will discuss react children in detail.
Introduction to Children in React
In React, we have props by which we can pass some data from one component of React application to the other component of the same React application. React children is also a react prop which is declared in react by default. This prop contains the content which is written in between the opening (<>) and closing (</>) tags where the component was called.
Consider an example in which we are using a component 'Card' inside the App.js file of the React Application.
This is what our file structure looks like.
Below is the App.js file
Below is the Card.jsx file
This is what our App.js page looks like. We can see the content that is written inside Card tags in App.js has reached the Card.jsx component through the prop 'children'.
Children are Props
It is very clear from the examples that we have discussed in our previous section that react children is nothing but a default prop of react. We can also access the children by using props.children in a react application. Given below is the same example as we discussed in the previous section, but this time, we will be using props.children to access the content.
Below is the App.js file
Below is the Card.jsx file
This is what our App.js page looks like. This time as well, we can see the content that is written inside Card tags in App.js has reached the Card.jsx component through the prop 'children'.
What Types of Content are Allowed for Props.children?
In props.children, content containing an integer, a string, a boolean value, an undefined value, an array, or even a react component itself is allowed.
One thing which is to note here is that if we pass null, false, true, or undefines as the children, these values will not render in the component. They will be simply ignored by the React application. This can be seen in the code given below.
Below is the App.js file
Below is the Card.jsx File
Nothing will be printed on our page. This is how our page will look like.
The only way to print these values on our react application is by passing them as strings ("null", "undefined" etc.).
Why is Props.children So Important?
Props. children significantly increase the code reusability and make our code more modular. If there were no props. children, we would have to create a separate component for separate content.
But due to the availability of props. children, now we can create a single component and we can pass the appropriate content with the help of props. children to the component.
Dealing with the props.children (React.Children)
It is possible that the props.children instead of one child element, they may contain multiple children elements.
Consider the code given below in which, multiple elements are declared inside the opening and closing tag of the component Card.
App.js
Cards.jsx
This is what our page looks like.
The console output from line 5 in the 'Cards.jsx' file prints a list of objects as given in the image below.
We have seen that props.children can contain multiple children in the form of a list. To handle these multiple children in the props.children, we have React.children which provides us utilities to handle various elements of props.children.
As of now, React.children provides us with 5 utilities which are given in the list below.
1. map React.Children.map is used to iterate over all the child elements that are present in the props.children.
Given below is the code in which, React.Children.map is used.
Cards.jsx
This is what the console output looks like.
2. forEach React.Children.forEach is also used to iterate over all the child elements that are present in the props.children.
Given below is the code in which, React.Children.forEach is used.
Cards.jsx
This is what the console output looks like.
section{.tip} Note: The difference between the React.Children.map and the React.Children.forEach is that React.Children.map returns an array while React.Children.forEach does not return anything. We can also check this by storing both the utilities in a variable and printing these variables. :::
Cards.jsx
This is what the console output looks like.
It can be seen that the 'mapData' variable is containing an array while the 'forEachData' variable is not storing anything and hence, it is printing 'undefined'.
3. count React.Children.count returns the number of elements that are present in the props.children.
Cards.jsx
This is what the console output looks like.
4. only React.Children.only verifies whether props.children contain only one element or not. If it contains only one element, it returns that element. Otherwise, it throws an error.
Cards.jsx
This is what the console output looks like.
5. toArray React.Children.toArray(props.children) converts the list of children into a flat array.
Cards.jsx
This is what the console output looks like.
Using Children in React
Let us discuss an example to discuss how we use children in React JS. We have a component 'Card' and the content written inside the 'Card' tags i.e. <Card> and </Card> will be passed as children.
App.js
Card.jsx
This is what our page looks like.
More Usage
Transforming Children
We can transform each child of children by simply iterating over the children using React.Children.map.
Running Some Code for Each Child
We can use React.Children.forEach to iterate over props.children and run some code for each child. For example, if we want to separate each element of the children by a horizontal line, we can do the following.
This is how each child gets separated from the subsequent child.
Counting Children
React.Children.count returns the number of elements that are present in the props.children.
Cards.jsx
This is what the console output looks like.
Converting Children to an Array
React.Children.toArray(props.children) converts the list of chidren into a flat array.
Cards.jsx
This is what the console output looks like.
Conclusion
- React children is a react prop that is declared in react by default. This prop contains the content which is written in between the opening (<>) and closing (</>) tags where the component was called.
- In props.children, content containing an integer, a string, a boolean value, an undefined value, an array, or even a react component itself is allowed.
- Props.children significantly increases the code reusability and makes our code more modular. If there were no props.children, we would have to create separate components for separate content.
- React.Children contains many utilities like map, forEach, count, toArray, and only which can be used to access and modify all the children present inside react children.