Q:

Why is my array not updated in the state in React?

After calling this.setState the talents property still holds the old value:
onTalentModalCheckboxChange(e) {
  debugger;
  var talent = JSON.parse(e.target.dataset.talent);
  talent.checked = !talent.checked;

  if (this.maximumSelectedTalentsReached() && talent.checked) return;

  const talentIndex = this.state.talents.findIndex(t => t.Id == talent.Id);
  let updatedTalents = [...this.state.talents];
  updatedTalents[talentIndex] = talent;

  this.setState({ talents: updatedTalents });

  // this method (setSearchResultsTotal) uses this.state.talents, 
  // but the talent that is updated here, is not updated. 
  // It still has the 'old' checked value
  this.setSearchResultsTotal();
}

The talents property contains a list of Talent objects, which all have the checked property. My problem is that when setting the updated talent object
What am I missing here?

A:

setState is asynchronous meaning the change doesn't happen immediately. So any function that uses state, needs to be called after the setState call completes. There are two ways to do this: use componentDidUpdate to fire off the function if this.state.talents is different than prevState.talents. Or, use the setState callback to call the function:
onTalentModalCheckboxChange(e) {
  debugger;
  var talent = JSON.parse(e.target.dataset.talent);
  talent.checked = !talent.checked;

  if (this.maximumSelectedTalentsReached() && talent.checked) return;

  const talentIndex = this.state.talents.findIndex(t => t.Id == talent.Id);
  let updatedTalents = [...this.state.talents];
  updatedTalents[talentIndex] = talent;

  // Only call this.setSearchResultsTotal after state has finished updating
  this.setState({ talents: updatedTalents }, () => this.setSearchResultsTotal(); );

}

