Kirill Stas Kirill Stas - 1 month ago 24
React JSX Question

change object.item in setState

how can i change item in object in getInitialState through setState ?

For example:

getInitialState: function() {
return {list: [
{id:'1',
title: 'The Baby Boss',
year: '2017',
quality: 'Blu-ray',
stars: ['Fred Astaire, ', 'Humphrey Bogart, ', 'Marlon Brando, ', 'Richard Burton, ', 'Charlie Chaplin'],
Show: false
},
{
id:'2',
title: 'Pirates of the Caribbean: Dead Men Tell No Tales ',
year: '2016',
quality: 'HDrip',
stars: ['John Depp, ', 'Orlando Bloom, ', 'Javier Bardem, ', 'Kaya Scodelario, ', 'Brenton Thwaites'],
Show: true
}`


More clear. I have created
getInitialState
and than
render
ed it and get on the screen displaying of list objects. I have button and I want click it and change smth in one of the objects. Through items in list i go with 'map' function. As result, I am trying to do smth like this code below:

this.setState({
film.Show: false
})


But this way doesn`t work. Which way of getting to my aim is correct ?Thanks for ideas.

Answer

You need to find your target item and update that:

someEventHandler: function(targetId) {
   this.setState({
      list: this.state.list.map(function(film) {
         if (film.id === targetId) {
            film.Show = false;
         }
         return film;
      })
   });
}