What is props.children?

Question

I am following this tutorial and the instructor did something like this to explain Higher order component

const aux = (props) => props.children;

export default aux;

and then imported this to some other file and replaced div tag with, for say <Aux> tag.

Now, It's sort of hard for me to understand this because I am not really sure what props.children actually do (since we hardly used it previously throughout our lectures).

I did some googling and went through an article or two on web but for some reason, their description was vey vague.

Can someone explain me the use of props.children in general?

https://codeburst.io/a-quick-intro-to-reacts-props-children-cb3d2fce4891 — Roy J, Apr 25 '18 at 17:50
`props.children` refers to any child elements passed into the component. — Ted, Apr 25 '18 at 17:51
@RoyJ that was the first article which popped up and definitely an interesting one but I got lost in this statement **When invoking the component I am passing a — , Apr 25 '18 at 17:52
The official docs seem to cover that: https://reactjs.org/docs/composition-vs-inheritance.html#containment — E_net4, Apr 25 '18 at 17:55

Tomasz Mularczyk · Accepted Answer · 2018-04-25T18:06:59.587

5

props.children is a prop like every other prop in React, but it's passed differently (when using JSX) between tags:

<Component>text</Component>

What you put between the tags will be passed to component as props.children. It can be:

undefined, null, a boolean, a number, a string, a React element, or an array of any of those types recursively.

It can also be a function that returns one of the above ^ to create render prop pattern.

If you want to directly work on children prop (filter or map them), you will probably need some React utility functions.

That's pretty much it. There are of course more details in React documentation.

edited Apr 25 '18 at 18:06

answered Apr 25 '18 at 17:55

Tomasz Mularczyk

34,501
19
112
166

I believe that it is also important to note that the example given in question is actually a way of replacing the
tag when you need to return a list of children components, but you do not really want to put them under a
- as explained by @steve-bohmbach, there may be styling issues. – Victor Mar 25 '20 at 07:58
is props.children used at all in vanilla JS? or it is solely react code? – Dimitris Papageorgiou Jul 18 '21 at 10:42
@DimitrisPapageorgiou only in React – Tomasz Mularczyk Jul 19 '21 at 09:32

score 1 · Answer 2 · answered Apr 25 '18 at 18:01

Usually, each component's children is actually an array. but when there is only a single child, props.children will be the single child component having no array wrapper.

So in this case : const aux = (props) => props.children; this will return a component.

score 1 · Answer 3 · answered Apr 25 '18 at 20:30

The standard has been built in to react 16.3 and replaced as just <>. You would use this when you need to render multiple components but do not wish to wrap them i a due to styling or any other number of reasons.

for example :

     <CustomeHeader />
     <CustomTable />
     <CustomFooter />

can not be rendered in react but :

     <>
       <CustomeHeader />
       <CustomTable />
       <CustomFooter />
     </>

or:

   <aux>
      <CustomeHeader />
      <CustomTable />
      <CustomFooter />
   </aux>

both above will work. whats inside the Aux or <>

score 0 · Answer 4 · answered Apr 25 '18 at 18:09

props.children is usually used while creating container components where container components will have different types of child components at different instances.

class Container extends React.Component{
  render(){
    return(
      <div>
        <div className="Header">AppName</div>
        {props.children}
      </div>
    )
  }
}

The container component can be used like,

<Container>
  <div>foo</div>
</Container>

What is props.children?

4 Answers4

Linked