Замените элемент Array в this.state

Question

Как заменить элемент (объект) в массиве this.state.items содержимым this.state.dataEdited . Все это должно происходить в методе handleEditUpdate

This.state

this.state = {
            name: '',
            day: '',
            dob: '',
            items : [],
            currentItem: {},
            dataEdited: {},
            toggle: false,
            loading: false
        }

Я пытался сделать это в методе handleEditUpdate , хотя это неверно и не дал желаемого результата, но не было существенной ошибки (за исключением того, что я мутировал состояние напрямую)

handleEditUpdate(event){
        event.preventDefault();
        const item = this.state.currentItem;
        let index = this.state.items.indexOf(item)
        if (~index){ 
          this.setState({
            items: this.state.items[index] = this.state.dataEdited
            });
        }
        this.setState({ toggle: false })
    }   

метод handleEdit

handleEdit(key){
        this.setState({
            currentItem: {...this.state.items[key]},
            toggle: true 
        });
    }

Визуализация

        <form onSubmit={this.handleUpdate}>
                                <input 
                                    className=""
                                    name="name"                             
                                    onChange={this.dataChange}
                                    defaultValue={this.state.currentItem.name}
                                    placeholder= "Celebrant's Name" 
                                    ref={name => this.name = name}
                                    required /> 
                                <input 
                                    className=""
                                    type="number" 
                                    name="day"
                                    min="1" 
                                    max="31"
                                    ref={day => this.day = day}
                                    onChange={this.dataChange}
                                    defaultValue={this.state.currentItem.day}
                                    placeholder= "day"  />
                                <input 
                                    className=""
                                    name="dob"
                                    type="month"                                
                                    onChange={this.dataChange}
                                    defaultValue={this.state.currentItem.dob} />

                                <button type="submit">update</button>
                                <button onClick={this.handleEditCancel}>cancel</button>
                            </form>
                        )
                        :
                        this.state.items.map((item, key) => ( 
                        <li key={key}>
                            <span> {item.name} </span>
                            <span> {item.day} </span>
                            <span> {item.dob} </span>
                            <button 
                                className="btn btn-light"
                                onClick={() => this.handleEdit(key)} >edit</button>
                            <button 
                                className="btn btn-danger" 
                                onClick={() => this.handleDelete(key)}>delete</button>
                        </li>

Answer 1

Я думаю, вы пытаетесь достичь этого? demo

вам нужно разделить предыдущий state.items перед установкой нового элемента, в противном случае он будет переопределен новым элементом / с.

Добавление

handleEditUpdate(event){
        event.preventDefault();
        const item = this.state.currentItem;
        let index = this.state.items.indexOf(item)
        if (~index){ 
          this.setState({
            items: [...this.state.items, this.state.dataEdited]
            });
           }
        }
        this.setState({ toggle: false })
    }   

Замена

...
        if (~index){ 
          this.setState({
            items: [this.state.dataEdited]
            });
           }
        }
... 

Удаление

...
        if (~index){ 
          this.setState({
            items: this.state.items.filter(i => i === ...)
            });
           }
        }
...    

Answer 2

Я смог добиться этого с помощью этого кода

handleUpdate(event){
        event.preventDefault();
        //const {name,day,dob} = this.state.dataEdited;
        const item = this.state.currentItem;
        let index = this.state.items.indexOf(item);
        const newItemList = [...this.state.items];
        newItemList.splice(index, 1, this.state.dataEdited);

        this.setState({ 
            items: [...newItemList],
            toggle: false 
        })

    }