[React] Children

[mahfujul-helios]

React Children

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.

Below is the App.js file

import React from "react";
import "./styles.css";
import Card from "./Card.jsx";

export default function App() {
  return (
    <div className="App">
      <Card>
        This is the content for the react children which can be accessed from
        the Card component (Card.jsx)
      </Card>
    </div>
  );
}

Below is the Card.jsx file

import React from "react";
import "./styles.css";

export default function Card({ children }) {
//     here, we are extracting the children prop and using it in our component. All the content present in the <Card></Card> which is called from App.js is present inside the children prop
  return (
    <div className="paragraph">
      <p>{children}</p>
    </div>
  );
}

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

import React from "react";
import "./styles.css";
import Card from "./Card.jsx";

export default function App() {
  return (
    <div className="App">
      <h1>React App</h1>
      <Card>{undefined}</Card>
      <Card>{false}</Card>
      <Card>{true}</Card>
      <Card>{null}</Card>
    </div>
  );
}

Below is the Card.jsx File

import React from "react";
import "./styles.css";

export default function Card(props) {
    // now, we can access children by using props.children
  return (
    <div className="paragraph">
      <p>{props.children}</p>
    </div>
  );
}

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

import React from "react";
import "./styles.css";
import Card from "./Card.jsx";

export default function App() {
  return (
    <div className="App">
      <Card>
        <h1>React App</h1>
        <p>This is the content of the react card</p>
        <span>Scaler.com</span>
      </Card>
    </div>
  );

}

Cards.jsx

import React from "react";
import "./styles.css";

export default function Card(props) {
  console.log(props.children);
  return (
    <div className="paragraph">
      <p>{props.children}</p>
    </div>
  );
}

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

import React from "react";
import "./styles.css";

export default function Card(props) {
  React.Children.map(props.children,(child,index)=>{
    console.log(index, child); // printing index and child on console.
  })
  return (
    <div className="paragraph">
      <p>{props.children}</p>
    </div>
  );
}

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

import React from "react";
import "./styles.css";

export default function Card(props) {
  React.Children.forEach(props.children,(child,index)=>{
    console.log(index, child); // printing index and child on console.
  })
  return (
    <div className="paragraph">
      <p>{props.children}</p>
    </div>
  );
}

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

import React from "react";
import "./styles.css";

export default function Card(props) {

    // mapData variable for React.Children.map
  let mapData = React.Children.map(props.children,(child,index)=>{
    return {index, child}
  })

    // forEachData variable for React.Children.forEach
  let forEachData = React.Children.forEach(props.children,(child,index)=>{
    return {index, child}
  })

  console.log("mapData",mapData)
  console.log("forEachData",forEachData)

  return (
    <div className="paragraph">
      <p>{props.children}</p>
    </div>
  );
}

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

import React from "react";
import "./styles.css";

export default function Card(props) {
  console.log(React.Children.count(props.children)); // prints the number of elements in props.children in console
  return (
    <div className="paragraph">
      <p>{props.children}</p>
    </div>
  );
}

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

import React from "react";
import "./styles.css";

export default function Card(props) {
  console.log(React.Children.only(props.children)); // should throw an error since 3 elements were passed to the Cards.jsx component from App.js
  return (
    <div className="paragraph">
      <p>{props.children}</p>
    </div>
  );
}

5. toArray React.Children.toArray(props.children) converts the list of children into a flat array.

Cards.jsx

import React from "react";
import "./styles.css";

export default function Card(props) {
  console.log(React.Children.toArray(props.children)); // array of elements present in React.Children will be printed
  return (
    <div className="paragraph">
      <p>{props.children}</p>
    </div>
  );
}

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. and will be passed as children.

App.js

import React from "react";
import "./styles.css";
import Card from "./Card.jsx";

export default function App() {
  return (
    <div className="App">
      <Card>
        <h1>Card 1</h1>
        <p>This is the content of card 1</p>
        <span>card1 Footer</span>
      </Card>
      <Card>
        <h1>Card 2</h1>
        <p>This is the content of card 2</p>
        <span>card2 Footer</span>
      </Card>
      <Card>
        <h1>Card 3</h1>
        <p>This is the content of card 3</p>
        <span>card3 Footer</span>
      </Card>
    </div>
  );
}

Card.jsx

```javascript
import React from "react";
import "./styles.css";

export default function Card(props) {
  console.log(props.children);
  return (
    <div className="paragraph">
      <p>{props.children}</p>
    </div>
  );
}

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.