props.children in React With Examples

In this tutorial we'll try to understand what is children prop (props.children) in React and how to use it.

React children prop Usage

If you have nested components like this

<Parent>
  <Child></Child>
</Parent>

The parent component will receive the content in a prop called children. For the example given above Parent component will receive a children prop set to <Child />

This kind of scenario is common with reusable components where components don't know their children ahead of time. These reusable components can use the special children prop to pass children elements directly into their output.

For example, let us create a Card component which we want to use in several places and whatever content is passed with in the Card component should be rendered.

Card.js

import "./Card.css"
const Card = () => {
  return (
    <div className="card">
    </div>
  )
}
export default Card;

Some styling for the Card component.

Card.css

.card{
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25) ;
  margin: 12px 0px;
}

Now suppose you have a Login component where you want to use this Card component, so you nest the content with in the Card component with the expectation that this content will be rendered within a Card.

import Card from "../UI/Card"

const Login = () => {
  return(
    <Card>
      <label htmlFor="name">Enter User Name</label>
      <input type="text" id="name"></input>
      <label htmlFor="pwd">Enter Password</label>
      <input type="password" id="pwd"></input>
    </Card>
  );
}
export default Login;

But running it won’t give any output. Though in Login component you have content inside a <Card> JSX tag but the Card parent component has no idea about it. It just has an empty <div> tag

<div className="card">
</div>

You have to use children prop in this scenario to pass children elements directly into their output. Here is the updated Card.js file.

import "./Card.css"
const Card = (props) => {
  const styleClasses = "card " + props.className;
  return (
    <div className={styleClasses}>
      {props.children}
    </div>
  )
}

export default Card;

Login.js

import Card from "../UI/Card"
import "./Login.css"
const Login = () => {
  return(
    <Card className="card-item">
      <label htmlFor="name">Enter User Name</label>
      <input type="text" className="inp" id="name"></input>
      <label htmlFor="pwd">Enter Password</label>
      <input type="password" className="inp" id="pwd"></input>
    </Card>
  );
}
export default Login;

Login.css

.card-item {
  display: block;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  padding: 0.5rem;
  margin: 1rem 0;
  border-radius: 12px;
  background-color: #A9A9A9;
}

.inp {
  display: block;
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

In Card.js as you can see props.children is used to receive the content. One more thing to notice is how CSS classes are used. Using props gives you the flexibility to pass the classes from the child component, giving the flexibility to control the style.

For Card component there is default styling using .card then you can add other classes received from child by using props.className.

const styleClasses = "card " + props.className;

Using with another content

Same reusable component can now be used with other content with out any problem. Suppose there is a Message.js file to render a message with in a card component.

import Card from "../UI/Card";
const Message = () => {
  return(
    <Card>
      <h3>Hello from the component</h3>
    </Card>
  );
}
export default Message;

Now this content inside the <Card> JSX tag will be passed in children prop.

That's all for the topic props.children in React With Examples. If something is missing or you have something to share about the topic please write a comment.

You may also like

KnpCode

October 27, 2022