Adding items to an array in javascript

Question

Admit it. Being new to JavaScript in 2018 is difficult. Coming from languages like C#, Java and Typescript(yeah subset of js..) where type safety is key, Javascript just keep f***** me over. I struggle with something simple like updating an array..

So I have this React component, where the state is defined like this:

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
      shoes: []
    };
  }
....
...
}

The shoes is an array of undefined(?)

This array is passed to a stateless component which looks like this

const Shoelist = props => {
  return (
    <Wrapper>
      {props.shoes.map((shoe, i) => (
        <div key={i}>
          <Shoe shoe={shoe} />
          <Separator />
        </div>
      ))}
    </Wrapper>
  );
};

I in my Form component, I have a method which is supposed to react(doh) on onClick methods. In this method I get a parameter with a new shoe to add in this list. This is very it stops for me in javascript - something which is faaaaairly easy in all other languages that we've being using for the past years..

I've tried several ways:

1#

 addShoe(shoe) {
        this.setState(state => {
          const list = state.shoes.push(shoe);
          return {
            list
          };
        });
      }

This results in an error: Uncaught TypeError: Cannot read property 'push' of undefined Do I need to define shoes as an Array? I thought the [] was enough

2#

I googled, I do that alot. I found one blog post saying something about react-addons-update. I installed this by running yarn add and code looks like this:

addShoe(shoe) {
    this.setState(update(this.state, { shoes: { $push: [shoe] } }));
  }

which results in Uncaught Error: update(): expected target of $push to be an array; got undefined.

Help! How difficult can this be?

EDIT

I pass this method into another component like this:

<ShoeModal onClose={this.addShoe} />

in the ShoeModal component this is bound to a onClick method:

<FinishModalButton
          onClick={this.props.onClose.bind(this, this.state.shoe)}>
....
</FinishModalButton>

ShoeModal.propTypes = {
  onClose: PropTypes.func.isRequired
};

This is not an answer, but an observation of something that might bite you later. .push doesn't return the array - it returns the count. So I think const list = state.shoes.push(shoe); won't give you what you expect later. — Frank Modica
– Frank Modica, Commented Nov 14, 2018 at 13:10
I've updated the question. Please let me know if you need anything else — Tobias Moe Thorstensen
– Tobias Moe Thorstensen, Commented Nov 14, 2018 at 13:24

Merim · Accepted Answer · 2018-11-14 13:10:16Z

2

You can do it this way:

this.setState({
     shoes: [...this.state.shoes, newShoe]
})

... adds all elements from this.state.shoes

answered Nov 14, 2018 at 13:10

Merim

1,3572 gold badges24 silver badges40 bronze badges

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

7 Comments

Oram Over a year ago

It's called spread

Tobias Moe Thorstensen Over a year ago

Thanks for you answer, merko. But the result is: Uncaught TypeError: Invalid attempt to spread non-iterable instance. Do I need to install any packages from yarn?

Merim Over a year ago

Could you console.log(this.state.shoes), seems like it's not an array or an object ?

Tobias Moe Thorstensen Over a year ago

Seems that you are correct. The output in chrome is: undefined

Merim Over a year ago

Here is the simple app: stackblitz.com/edit/react-2svott Hope it helps, ask anything you need

|

Frank Modica · Accepted Answer · 2018-11-14 13:29:46Z

1

With your updates we can see that the issue is the way the addShoe callback is passed. It's being invoked as a function instead of a method of an object, so it loses context.

Change it to:

<ShoeModal onClose={this.addShoe.bind(this)} />

or

<ShoeModal onClose={shoe => this.addShoe(shoe)} />

In addition, .push returns the count of the array, so the following line won't give you what you expect:

const list = state.shoes.push(shoe);

See @merko's answer for a solution.

answered Nov 14, 2018 at 13:29

Frank Modica

10.5k4 gold badges27 silver badges42 bronze badges

Comments

Nishant Nair · Accepted Answer · 2018-11-14 13:20:54Z

0

Firstly, your addShoe method is not an arrow function. Using arrow functions because the context this is of the component.

Second, you are returning the object {list}. This sets the variable list in state. Also push to the new list variable instead of mutating state. Change your function to

addShoe = (shoe) => {
    this.setState(state => {
      let list = state.shoes;
      list.push(shoe);
      return {
        shoes : list
      };
    });
  }

edited Nov 14, 2018 at 13:20

answered Nov 14, 2018 at 13:18

Nishant Nair

2,03015 silver badges19 bronze badges

4 Comments

Frank Modica Over a year ago

We don't know how he's calling addShoe yet. He could be doing it with an arrow function or .bind. The addShoe method on the class doesn't necessarily have to be an arrow function.

Tobias Moe Thorstensen Over a year ago

Doing it with a bind.

Frank Modica Over a year ago

Ok now with the update we can say that the way the method is passed is a problem. <ShoeModal onClose={this.addShoe} /> should probably be <ShoeModal onClose={this.addShoe.bind(this)} /> or <ShoeModal onClose={shoe => this.addShoe(shoe)} />

Tobias Moe Thorstensen Over a year ago

@FrankModica magic! Can you post that as an answer and I'll accept it?

Collectives™ on Stack Overflow

Adding items to an array in javascript

3 Answers 3

7 Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related