How to add new child key-value to a React State object

Question

I'd like to add a new child key-value to an existing partent -happening on React. Let's say this is my state:

this.state = {
  genres: {
    Rock: '',
    Jazz: '',
    Pop: ''
  }
}

And this is my method:

addingGenre(tw) {
  this.setState({
    genres: { [tw]: '', }
    })
}

This is obviously not working, itoverwrites my full state --> {genres: tw}.

Thanks so much in advance :)

Answer 1

You need to push to the current state. So it should be something like this:

addingGenre(tw) {
  this.setState({
    genres: { ...this.state.genres, [tw: '']}
    })
}

Answer 2

You can do it like this -

addingGenre(tw) {
  const state = this.state; 
  state.genres[tw] = ''; 
  this.setState(state)
}