CODEWITHSUNDEEP
javascriptreactjsreact-redux
nim007
nim007

Reputation: 3058

What is {this.props.children} and when you should use it?

Being a beginner to React world, I want to understand in depth what happens when I use {this.props.children} and what are the situations to use the same. What is the relevance of it in below code snippet?

render() {
  if (this.props.appLoaded) {
    return (
      <div>
        <Header
          appName={this.props.appName}
          currentUser={this.props.currentUser}
        />
        {this.props.children}
      </div>
    );
  }
}

Upvotes: 246

Views: 311928

Answers (8)

Soroush Chehresa
Soroush Chehresa

Reputation: 5678

What even is ‘children’?

The React docs say that you can use props.children on components that represent ‘generic boxes’ and that don’t know their children ahead of time. For me, that didn’t really clear things up. I’m sure for some, that definition makes perfect sense but it didn’t for me.

My simple explanation of what this.props.children does is that it is used to display whatever you include between the opening and closing tags when invoking a component.

A simple example:

Here’s an example of a stateless function that is used to create a component. Again, since this is a function, there is no this keyword so just use props.children

const Picture = (props) => {
  return (
    <div>
      <img src={props.src}/>
      {props.children}
    </div>
  )
}

This component contains an <img> that is receiving some props and then it is displaying {props.children}.

Whenever this component is invoked, {props.children} will also be displayed and this is just a reference to what is between the opening and closing tags of the component.

//App.js
render () {
  return (
    <div className='container'>
      <Picture key={picture.id} src={picture.src}>
          //what is placed here is passed as props.children  
      </Picture>
    </div>
  )
}

Instead of invoking the component with a self-closing tag <Picture /> if you invoke it with full opening and closing tags <Picture> </Picture> you can then place more code between it.

This de-couples the <Picture> component from its content and makes it more reusable.

Reference: A quick intro to React’s props.children

Upvotes: 349

netanel
netanel

Reputation: 36

In React, the props.children property refers to the child elements that are passed to a React component.

For example, in the following code:

<MyComponent>
  <div>Child 1</div>
  <div>Child 2</div>
</MyComponent>

The MyComponent component has two children: a div element containing the text "Child 1" and a div element containing the text "Child 2". These children can be accessed and rendered by the MyComponent component using the props.children property.

For example, the MyComponent component could render its children like this:

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

This would render the two div elements as children of the MyComponent component.

Upvotes: 0

Kowsigan Atsayam
Kowsigan Atsayam

Reputation: 453

The important thing to note here is that children are a special prop that is used to pass the data from the parent component to the children component but this data must be enclosed within the parent’s opening and closing tag. This is used mostly in some wrapper component by which we have to pass the data onto the next component and also the data which we pass its static data ( in most cases ) because for dynamic data there is another way to pass props to the component.

Here is the example

Upvotes: 0

Soner from The Ottoman Empire
Soner from The Ottoman Empire

Reputation: 20891

For a children, there is a parent which is openin/closing tags as it can be seen in React's official example, which is FancyBorder.

h1 and p are the children of FancyBorder. You can examine it in practice on the CodePen link.

enter image description here

Upvotes: 2

Homa
Homa

Reputation: 41

Children is a reserved name, and the value of this special children prop will always be the content between the opening and closing tags of your custom component. So in this case, this content between the opening and closing tag, that is what will be available on props children inside of that component.

Upvotes: 4

BTR
BTR

Reputation: 5200

This is answered, but wanted to add an optimization example. You can decompose inline to only get specific properties instead of the entire props object (which means you don't have to keep writing props).

const MyView = ({title, children}) => {
  return (
    <>
      <h1>{title}</h1>
      {children}
    </>
  );
}

Then you'd use it like so:

import { MyView } from './MyView';

const MyParentView = () => {
  return (
    <MyView title="Hello">
      <h2>World</h2>
    </MyView>
  );
}

The end result would be HTML which renders out to something like this:

<div>
  <h1>Hello</h1>
  <h2>World</h2>
</div>

Upvotes: 14

zeljko_a
zeljko_a

Reputation: 4165

props.children represents the content between the opening and the closing tags when invoking/rendering a component:

const Foo = props => (
  <div>
    <p>I'm {Foo.name}</p>
    <p>abc is: {props.abc}</p>

    <p>I have {props.children.length} children.</p>
    <p>They are: {props.children}.</p>
    <p>{Array.isArray(props.children) ? 'My kids are an array.' : ''}</p>
  </div>
);

const Baz = () => <span>{Baz.name} and</span>;
const Bar = () => <span> {Bar.name}</span>;

invoke/call/render Foo:

<Foo abc={123}>
  <Baz />
  <Bar />
</Foo>

props and props.children

Upvotes: 49

T.J. Crowder
T.J. Crowder

Reputation: 1074168

I assume you're seeing this in a React component's render method, like this (edit: your edited question does indeed show that):

class Example extends React.Component {
  render() {
    return <div>
      <div>Children ({this.props.children.length}):</div>
      {this.props.children}
    </div>;
  }
}

class Widget extends React.Component {
  render() {
    return <div>
      <div>First <code>Example</code>:</div>
      <Example>
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </Example>
      <div>Second <code>Example</code> with different children:</div>
      <Example>
        <div>A</div>
        <div>B</div>
      </Example>
    </div>;
  }
}

ReactDOM.render(
  <Widget/>,
  document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

children is a special property of React components which contains any child elements defined within the component, e.g. the divs inside Example above. {this.props.children} includes those children in the rendered result.

...what are the situations to use the same

You'd do it when you want to include the child elements in the rendered output directly, unchanged; and not if you didn't.

Upvotes: 41

Related Questions