title: React state - updating property on object in nested array
body: <p>I have a React app with an interface that allows users to select a date and time slot. I have a top level object that maintains the state, which might look like this:</p>
  
  <pre><code>this.state = {
    days: [{ 
      date: '12-13-2022',
      time_slots: [{
          start: '10 am',
          end: '11 am',
          selected: false
        },{
          start: '1 pm',
          end: '3 pm',
          selected: false
        }]
      }, {
      date: '12-14-2022',
      time_slots: [{
         start: '10 am',
         end: '11 am',
         selected: false
       }
    }]
  }
  </code></pre>
  
  <p>When a user clicks on a time slot, I want to update the <code>selected</code> property to <code>true</code>. </p>
  
  <p>So far I have this, but I think I'm mutating the state, which is bad practice.</p>
  
  <pre><code>slotClicked(day_index, slot_index) {
    let state = this.state.days[day_index].time_slots[slot_index].selected = true;
    this.setState({state});
  }
  </code></pre>
  
  <p>How might I update the state in an efficient (in terms of re-rendering) and immutable way?</p>