Q:

how to multiple spread operator inside map

class TodoApp extends React. Component {

  state = {
    item: [{fruit: 'apple'}]
  }

  handle=(name, value, num)=>{
    console.log(name, value, num)

    this.setState(({item}) => ({
        item: item.map((cv,i)=>( {...cv, [name]: {[num] :value}})
    )
    }), ()=>{ console.log(this.state.item)})
  }

  render() {
    return (
      <div>
        <Input name={'items'} onChange={this.handle}/>
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

A working example: https://jsfiddle.net/dapyb0ef/
item: item.map((cv,i)=>( {...cv, [name]: {[num] :value}})
each time I type in a field, it will overwrite the previous one.  so it prints only one item in items e.g.
fruit: "apple"
items: {2: "123"}

What I am achieving is to keep all items when typing in each input field
   fruit: "apple"
   items: {0: "typed string..."}, {1: "typed information"}, {2: "typed information"}

So my question is  item: item.map((cv,i)=>( {...cv, [name]: {[num] :value}})
How do i store [num] and keep all information.  Thanks

A:

You simply need to spread the inner items as well like
 this.setState(({item}) => ({
    item: item.map((cv,i)=>( {...cv, [name]: {...cv[name], [num] :value}})
)

Working demo

