Setstate of specific object in array

Question

I have a cats array that I pull from an api

i map over these and render them on a page

each one gets rendered with a like button, when I hit like I want it to like it and when i hit like again, it should unlike it

my initialState is :

  state = {
    cats: []
  };

then once i call the api state looks like this:

cats: [
    {url: Array(1), id: Array(1), source_url: Array(1), liked: false}
    {url: Array(1), id: Array(1), source_url: Array(1), liked: false}
]

I have a like cat method whereby I find the cat that I liked like this:

var cat = this.state.cats.find(c => c.id[0] === cat.id[0])

considering I have all this information, how do I call setState for that specific cat to change the liked from false to true?

I was thinking something like this:

   this.setState(prevState => ({ cats: {
      cat: {
        ...prevState.cat,
        liked: !prevState.cat.liked
      }
    }}))

but it does not know what liked is of undefined

any ideas?

Is it obverses? Should be prevState.cat[0].liked. What is cat.id[0] in var cat = this.state.cats.find(c => c.id[0] === cat.id[0])? — FisNaN
– FisNaN, Commented Mar 15, 2018 at 23:39

score 1 · Accepted Answer · 2018-03-16 00:58:09Z

1

One problem with your approach is that there's no prevState.cat.

Assuming the (un)liked cat is stored in cat:

this.setState(prevState => ({
    cats: prevState.cats.map(c => c.id[0] === cat.id[0] ? Object.assign(c, { liked: !c.liked }) : c)
}));

Demo:

var state;

function setState(a) {
  state = Object.assign(state, a(state));
}

state = {
  cats: [
      {url: [0], id: [1], source_url: [0], liked: false},
      {url: [0], id: [2], source_url: [0], liked: false}
  ]
};

var cat = state.cats[1];
setState(prevState => ({
  cats: prevState.cats.map(c => c.id[0] === cat.id[0] ? Object.assign(c, { liked: !c.liked }) : c)
}));

console.log(state.cats[1].liked);

edited Mar 16, 2018 at 0:58

answered Mar 16, 2018 at 0:00

user5734311

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

5 Comments

Omar K Over a year ago

when using prevstate should you mutate the state directly ?

user5734311 Over a year ago

@Omar You're right, one shouldn't. Fixed my answer.

The Walrus Over a year ago

just so im clear, you map over the array of cats, you find the one by matching the ids, and then you change the liked key for that cat with object.assign so as to not mutate it directly?

user5734311 Over a year ago

@TheWalrus Exactly, but map() creates a copy, so I'm never mutating prevState, not even indirectly.

Omar K Over a year ago

this is a much better implementation

Collectives™ on Stack Overflow

Setstate of specific object in array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related