Add to an array in React

Question

I'm quite new to React and I'm trying to build the classic to do list! However, I'm struggling to track the array items.
I'm creating the items as follows:

     this.setState({item: {
      text: event.target.value,
      index: this.state.items.length++,
      completed:false
        }

And I've been adding to the array of items like this:

     this.setState({items:this.state.items.concat(this.state.item)});

But this method creates a new array every time, so I can't use the index of the item. However when I try using push to add to the array, I can't seem to display it! Any help would be much appreciated!

What code are you using when you are using push? OR - could you place an id on each item so you don't need positional indexes? — Davin Tryon
– Davin Tryon, Commented Sep 14, 2017 at 20:16
I'm not sure how to place an id on the item other than than to base the index on the length of the array! — Nespony
– Nespony, Commented Sep 14, 2017 at 20:28
well I want to be able to access the items by their position in the list. Which is what I had the index for, but its not working — Nespony
– Nespony, Commented Sep 14, 2017 at 20:29

Ruan Mendes · Accepted Answer · 2017-09-14 21:01:02Z

2

What I suspect here is when an event to add a task is emitted, you are trying to set a state for item and then you are immediately setting the items state as well.

React may batch multiple setState() calls into a single update for performance."

Please refer to the docs. So you shouldn't expect item to have your latest item when you try this.setState({items:this.state.items.concat(this.state.item)});

You can have try the following

const item = [{
  text: event.target.value,
  index: this.state.items.length + 1,
  completed:false
 }]

let items = {this.state}
items = items.push(item)
this.setState({items})

You can also pass a function to the setState method

this.setState(function(prevState, props) {
   //Code goes here
});

edited Sep 14, 2017 at 21:01

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

answered Sep 14, 2017 at 20:40

Brr Switch

9841 gold badge9 silver badges22 bronze badges

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

Comments

Rafael Pizao · Accepted Answer · 2019-01-15 02:49:24Z

0

By definition, Arrays are immutable data.

To add new item without mutation (and to be most cleaner) exists package immutability-helper.

Install in the project directory

npm install immutability-helper --save

...import in the class

import update from 'immutability-helper'

...and update array

update(this.state.items, {
  $splice: [[0, 0, item]]
})

This code make a "clone" of total_rating and use the $splice to add the new average at the 0th index.

answered Jan 15, 2019 at 2:49

Rafael Pizao

88111 silver badges24 bronze badges

Collectives™ on Stack Overflow

Add to an array in React

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