React props.children is not array

Question

According to the react docs, if a component has multiple children, this.props.children should be an array.

I have the following component:

export class Two extends React.Component {

    componentDidMount() {
        console.log(Array.isArray(this.props.children)); // false
    }

    render() {

        return(
            <div>
                {this.props.children}
            </div>
        );
    }

};

Which I pass children to in another component's render() method:

<Two>
    <Img src="/photos/tomato.jpg"/>
    <Img src="/photos/tomato.jpg"/>
</Two>

Why is this.props.children not an array? More importantly, how can I get it to be one?

Also according to the docs, children is an opaque data structure. — Chris Martin
– Chris Martin, Commented Sep 19, 2015 at 20:43
What do you need to do with this.props.children? If you want to iterate all the children than you have tools like in React Children utilities. — Davin Tryon
– Davin Tryon, Commented Sep 19, 2015 at 21:54
@DavinTryon That ultimately worked but it feels a bit clunky for something that I imagine is quite common. This did the trick: let children = []; React.Children.forEach(this.props.children, function(child) { children.push(child); }); — Sebastian Sandqvist
– Sebastian Sandqvist, Commented Sep 21, 2015 at 3:41

Michael Freidgeim · Accepted Answer · 2021-07-01 02:40:56Z

57

Found a better solution to this after some digging in the React.Children source. It looks like a .toArray() method has been added in React 0.14, soon to be released.

Once it is out we will be able to simply do something like this:

let children = React.Children.toArray(this.props.children);

It's documented in https://reactjs.org/docs/react-api.html#reactchildren

edited Jul 1, 2021 at 2:40

Michael Freidgeim

28.8k17 gold badges164 silver badges181 bronze badges

answered Sep 21, 2015 at 22:16

Sebastian Sandqvist

1,8892 gold badges17 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tomty Over a year ago

There's actually an entire API for working with props.children: facebook.github.io/react/docs/react-api.html#react.children. props.children itself is considered "opaque" and no assumptions should be made about its implementation - see github.com/facebook/react/issues/751.

The Fool · Accepted Answer · 2019-09-04 01:52:48Z

6

I found this solution. It will render all children, one or more.

const BigMama = ({ children, styles, className }) => {
  return (
    <div
      styles={{styles}}
      className={(className ? className : '')}
    >
    {
      React.Children.map(children, (child) =>
        <React.Fragment>{child}</React.Fragment>)
    }
  </div>)
}


<BigMama
  styles={{border: 'solid groove'}}
  className='bass-player'
>
  <h1>Foo</h1>
  <h2>Bar</h2>
  <h3>Baz</h3>
  <h4>Impossibru!</h4>
<BigMama>

edited Sep 4, 2019 at 1:52

answered Sep 3, 2019 at 14:39

The Fool

21.2k7 gold badges76 silver badges123 bronze badges

Comments

Mark Swardstrom · Accepted Answer · 2021-01-21 20:08:32Z

2

If you want to do something with the results (eg. render the array in a list), this is how you can use children. The React docs talk about how the map function works with children, as it's an opaque structure.

export const List = ({ children }) => {
  return (
    <ul>
      {React.Children.map(children, child => <li>{child}</li>)}
    </ul>
  )
}

So then you can call

<List>
  {item.name}
  {item.price}
</List>

answered Jan 21, 2021 at 20:08

Mark Swardstrom

18.3k6 gold badges74 silver badges75 bronze badges

Comments

Milind Agrawal · Accepted Answer · 2019-09-03 14:46:18Z

1

There are many ways and some are mentioned above already but if you wanna keep it simple and want to achieve this without any utility then below should work

const content = [
  <Img src="/photos/tomato.jpg"/>,
  <Img src="/photos/tomato.jpg"/>
];

<Two>
  {content}
</Two>

answered Sep 3, 2019 at 14:46

Milind Agrawal

2,9541 gold badge15 silver badges22 bronze badges

Comments

Amsvartner · Accepted Answer · 2019-09-24 11:27:07Z

1

You might find the spread syntax useful in this case. Have you tried it out?

<div>
    { [...this.props.children] }
</div>

Combine with map to manipulate the output.

<div>
    { [...this.props.children].map(obj => <div style="someStyling"> {obj} </div> ) }
</div>

answered Sep 24, 2019 at 11:27

Amsvartner

7938 silver badges20 bronze badges

1 Comment

Kzqai Over a year ago

I love this, but in typescript I get: Type 'ReactNode' must have a '[Symbol.iterator]()' method that returns an iterator.ts(2488) sadly.

Jesimiel Almedejar · Accepted Answer · 2022-03-15 10:55:07Z

0

Is it because is it a DOM node? Try console.log(this.props.children) you will notice that it logged a array of objects (note that each object contains information of the child element of the component). I read that node and array are not the same tho they have a same format. Visit Javascript DOMNode List for more information.

answered Mar 15, 2022 at 10:55

Jesimiel Almedejar

111 bronze badge

Collectives™ on Stack Overflow

React props.children is not array

6 Answers 6

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related