change object.item in setState

Question

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 rendered 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 1

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;
      })
   });
}