ReactJS setState with object and array

Question

I want to have a data structure in terms of array e.g.

data[0]
  title:"ABC"
  photo: "./123.jpg"
  summ: "text text test"
data[1]
  title:"ABCD"
  photo: "./1234.jpg"
  summ: "text texwt test"

I have attempted to setState like this, but it won't work. Please guide me ;(


             this.setState({
               data:{
                title: [ ...this.state.data.title, title ],
                photo: [ ...this.state.data.photo, photo ],
                summ: [ ...this.state.data.summ, summ ]   

                    }

                  });

Uncaught (in promise) TypeError: _this.state.data.concat is not a function

///// Mistake on not initialize my state

// this is incorrect
this.state={
data:{
title:null,
photo:null,
summ:null,
}
//The correct version is
this.state={
data:[],

You are somehow creating an object of arrays whereas you want and array of objects. You seem to want something more in the line of this.setState({data: [...this.state.data, {title, photo, summ}]}) — Felix Kling
– Felix Kling, Commented Feb 18, 2020 at 12:52
You said you want data to be an array. However, in setState, you are assigning data to an object — Jacob
– Jacob, Commented Feb 18, 2020 at 12:55
Don't give us an "e.g." of your data, show us a real definition in JavaScript. — crashmstr
– crashmstr, Commented Feb 18, 2020 at 12:55
Uncaught (in promise) TypeError: _this.state.data.concat is not a function @FelixKling — Random I.T
– Random I.T, Commented Feb 18, 2020 at 12:56

Nicolas Menettrier · Accepted Answer · 2020-02-18 13:02:25Z

1

As Felix Kling said in commentary, you want an Array of Object so you need to have a structure like that :

this.setState({
  data: [
    ...this.state.data,
    { title, photo, summ }
  ];
});

answered Feb 18, 2020 at 13:02

Nicolas Menettrier

1,6991 gold badge16 silver badges34 bronze badges

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

2 Comments

Random I.T Over a year ago

Thanks for reply but Uncaught (in promise) TypeError: _this.state.data.concat is not a function

Nicolas Menettrier Over a year ago

How did you initialize your state ? Try to put this in the constructor : this.state = { data: [] }

octobus · Accepted Answer · 2020-02-18 13:10:38Z

1

The reason your solution doesn't work is that you are trying to assign an object to an array.

I am not sure if you are trying to add an item to array or change single item from an array. If you are trying to add, you can do it like this:

this.setState({
...this.state.data, {title, photo, summ}
})

However if you are trying to change an item from the array. You should store in a temporary variable and then assign it like this.

const tempArray = this.state.data;
this.setState({
    data: tempArray.filter(//some change function)
})

If you are trying to initialize your data into state, you can do it like this:

import JsonData from "./myJsonData"
constructor(props) {
super(props);
this.searchBarRef = React.createRef();
this.state = {
  data: JsonData
};

}

Hope this solves your issue. If I couldn't explain clearly please say, so I can try to give a better answer to your problem.

edited Feb 18, 2020 at 13:10

answered Feb 18, 2020 at 13:01

octobus

1,2761 gold badge16 silver badges20 bronze badges

2 Comments

Random I.T Over a year ago

Thanks for your reply. I have a Json data, I want to use store it into a state variable and display it later provided I have two buttons A and B. A will show list A // $filter column eq 1 B will show list B // $first column eq 2 I am trying to save the data into state so when I click the button, the query is chanaged and data will be changed too

octobus Over a year ago

I update my answer and added how to initialize state with jsonData. @RandomI.T

Collectives™ on Stack Overflow

ReactJS setState with object and array

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related