Add elements to Array with map?

Question

I have an Array that I get from Props: this.arrayContenido = this.props.children;. If I console.log this, i have an array like this: https://puu.sh/Dlsce.png

ok, I need split this array for animate them with gsap. I mapped this array, and assign each element of this array to new array(this.children =[] in constructor):

{this.arrayContenido.map(function(item, i) {
                return (
                  <div key={i}  ref={div => (this.childrens[i] = div)}>
                    {item}
                  </div>
                );
              })}

Why when i do console.log in componentDidMount for this.childrens i have undefined results?

Typo? Your code says this.childrens[i] The plural of "child" is "children", you have "childrens" — user5734311
– user5734311, Commented Apr 29, 2019 at 10:26
In the code you use this.childrens but in the explanation you wrote this.children. Note the s — Olian04
– Olian04, Commented Apr 29, 2019 at 10:29

maazadeeb · Accepted Answer · 2019-04-29 10:30:39Z

1

Looks like you have problems with this. You can use arrow function to get proper this

{
  this.arrayContenido.map((item, i) => {
    return (
      <div key={i} ref={div => (this.childrens[i] = div)}>
        {item}
      </div>
    );
  });
}

This is assuming that this code lies in the render function or any function with the correct this, which is the component.

answered Apr 29, 2019 at 10:30

maazadeeb

6,1122 gold badges32 silver badges41 bronze badges

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

Comments

remix23 · Accepted Answer · 2019-04-29 10:35:00Z

The first issue is the anonymous function without binding, this won't be what you expect inside it and therefore this.children will be undefined. You can use an arrow function instead which provides the auto binding:

{this.arrayContenido.map((item, i) => {
    return (
        <div key={i}  ref={div => (this.childrens[i] = div)}>
            {item}
        </div>
    );
})}

You were already using arrow function in the ref prop, but not in the surrounding anonymous function...

The second issue is with this.props.children: it shouldn't be seen as an array. If you want to iterate over a React component's children you have to use React.Children.map(this.props.children, () => ....)

look into React.Children for more details.

Collectives™ on Stack Overflow

Add elements to Array with map?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related