Replace an Array element in this.state

Question

How do i replace an element(object) in this.state.items array with the content of this.state.dataEdited. All of which is supposed to happen in the handleEditUpdate method

This.state

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

I tried this in handleEditUpdate Method although its wrong and did not produce desired result but there was no major error(except that i mutated state directly)

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 method

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

Render

        <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>

what is this if (~index){...? you might mean if (index>-1){... — Mechanic
– Mechanic, Commented Apr 3, 2020 at 14:41
it means if(index !== -1) , it is some code i stumbled upon and I wanted to see its outcome — henrie
– henrie, Commented Apr 3, 2020 at 14:46
bitwise not operator, are you sure you wanted to use it like that? e.g. if index=1 then ~index is -2 — Lukasz 'Severiaan' Grela
– Lukasz 'Severiaan' Grela, Commented Apr 3, 2020 at 16:33

Adolfo Onrubia · Accepted Answer · 2020-04-03 15:30:12Z

2

I think your trying to achieve this? demo

you need to split previous state.items before setting the new element, otherwise it will override by new item/s.

Adding

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 })
    }

Replacing

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

Removing

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

edited Apr 3, 2020 at 15:30

answered Apr 3, 2020 at 14:45

Adolfo Onrubia

1,83115 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

henrie Over a year ago

but this.state.items is an array ..does it apply?

Adolfo Onrubia Over a year ago

sorry i missed that, updating answer

henrie Over a year ago

it is supposed to replace the specific item on display, it didn't..i just tried it out

Adolfo Onrubia Over a year ago

So is a list with only one item?

henrie Over a year ago

no, multiple items but i tried running the update on one item but didn't get the desired result

|

henrie · Accepted Answer · 2020-04-03 23:20:41Z

0

I was able to achieve this using this code

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 
        })

    }

answered Apr 3, 2020 at 23:20

henrie

1651 silver badge13 bronze badges

Collectives™ on Stack Overflow

Replace an Array element in this.state

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related