Reactjs how to initialize array object in state

Question

I'm new to reactjs and i'm learning to change state in reactjs. I'm trying to initialize an array object in state with unknown length, and later update the array object using set state. Following is the code:

state = {
  error: null,
  temperature: null,
  isLoaded: false,
  Weather5days: [],
};

So I have initialized Weather5days as an array, with unknown length. I get the data for Weather5days through API as json, so after fetch, I do this:

then(json => {
  var newArr = json.Forecasts.map(function(val) {
    //Forecasts have length of 5 array
    return {
      date: val.Date,
    };
  });

  console.log(newArr); // I checked, data is copied correctly in newArr.

  this.setState({
    Weather5days: newArr, //set state of the weather5days
  });
});

Now above code works with no error, but when I call console.log(this.state.Weather5days), the array is empty. So I thought the way of initializing Weather5days was wrong so I tried the following:

state = {
  error: null,
  temperature: null,
  isLoaded: false,
  Weather5days: [{}, {}, {}, {}, {}], //array object of length 5
};

and It works. This is half the solution because in certain circumstances, you don't know the length of the array(that comes from the API) and I cannot afford to do literally do [{},{}..] everytime. What is the proper way of initializing array object with unknown length in state?

use the push method in array in order to put the value in the array, kinda like this. this.state.Weather5days.push(newArr); — John Wick
– John Wick, Commented Aug 22, 2018 at 5:04
@JohnWick if i directly push to Weather5days that would be directly mutating the state which should be avoided in reactjs as far as I know — Eric Ahn
– Eric Ahn, Commented Aug 22, 2018 at 5:06
You can update your state like this this.setState({ Weather5days: [...this.state.Weather5days, newArr] }) or like this: this.setState({ Weather5days: this.state.Weather5days.concat([newArr]) }) — Fcmam5
– Fcmam5, Commented Aug 22, 2018 at 5:15

user3379150 · Accepted Answer · 2019-07-04 07:21:14Z

2

Hi your defined the Weather5days as empty array and adding the newArr to it but you should take the previous state of array and add your newArr to the state like this

this.setState({
Weather5days : [...this.state.Weather5days, newArr]
})

answered Jul 4, 2019 at 7:21

user3379150

319 bronze badges

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

Comments

John Wick · Accepted Answer · 2018-08-22 05:15:22Z

1

you can do it like this

const updated = this.state.Weather5days.slice(); 
updated.push(newArr); 
this.setState({Weather5days:updated});

answered Aug 22, 2018 at 5:15

John Wick

5091 gold badge7 silver badges20 bronze badges

1 Comment

Eric Ahn Over a year ago

no luck :( nothing at the moment works without initializing Weather5days:[{},{},{},{},{}] at the moment..keeps on returning empty array

Mukesh Burnwal Mike · Accepted Answer · 2018-08-22 05:15:48Z

1

hope this could work.please check

const {Weather5days}=this.state
              this.setState({
          Weather5days: [...Weather5days,newArr]
      });

answered Aug 22, 2018 at 5:15

Mukesh Burnwal Mike

4992 silver badges7 bronze badges

1 Comment

Eric Ahn Over a year ago

no luck :( nothing at the moment works without initializing Weather5days:[{},{},{},{},{}] at the moment..keeps on returning empty array

Manoz · Accepted Answer · 2018-08-22 06:06:28Z

-1

When you set array in state you need to verify its updated state in callback. Because of the behavior of states in react are asynchronous.

 this.setState({
    Weather5days: newArr  //set state of the weather5days
  },()=> {
     console.log(this.state.Weather5days); 
  });

I think you are missing this point only.

answered Aug 22, 2018 at 6:06

Manoz

6,62713 gold badges72 silver badges117 bronze badges

Collectives™ on Stack Overflow

Reactjs how to initialize array object in state

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related