Javascript object elements is undefined

Question

Trying to log the values of name, day and dob elements stored in dataEdited as object.Two of the elements display Undefined with just one displaying the correct value. Here is the code

/*    two-way state binding   */
dataChange(event){
        const target = event.target;
        const value = target.value; //gets value of the textbox
        const name = target.name;

        this.setState({ dataEdited: {[name]: value} });
    }
handleUpdate(event){
        event.preventDefault();
        const {name,day,dob} = this.state.dataEdited;
        console.log(name, day, dob);

        /* this.setState({ toggle: false }) */

    }

State

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

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 is the result on the console

undefined undefined "2020-08"

I don't understand how this is possible, can I get an explanation. Also, how can I fix this?

what do you get when you log this.state.dataEdited to the console — Test12345, Apr 02 '20 at 09:20
as mentioned in the question i got *Undefined Undefined "2020-08"* — henrie, Apr 02 '20 at 09:23
`setState({ dataEdited: {[name]: value} })`. You're setting `dataEdited` as an object that only has a single property. React only performs a shallow merge (Object.assign) when setting state, so if you redefine a state value that is an object, you have to spread the old value into the new one. — JMadelaine, Apr 02 '20 at 09:32

perlindstroem · Accepted Answer · 2020-04-02T09:46:40.873

3

When you execute this.setState({ dataEdited: {[name]: value} }); you overwrite the other values in the object assigned to dataEdited.

You should change that to this.setState({ dataEdited: { ...this.state.dataEdited, [name]: value} }); to preserve the previous values inside this.state.dataEdited

UPDATE (Thanks @JMadelaine): You should use this.setState(prev => ({ dataEdited: { ...prev.dataEdited, [name]: value}})); to ensure that no concurrent state changes affects the setState()

More info: https://stackoverflow.com/a/50837784/10201813

edited Apr 02 '20 at 09:46

answered Apr 02 '20 at 09:34

perlindstroem

131
6

1

You should pass a function since your new state value depends on the previous value: `this.setState(prev => ({ dataEdited: { ...prev.dataEdited, [name]: value}}));` – JMadelaine Apr 02 '20 at 09:37

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

2

Problem

you are overwriting the same dataEdited variable over and over when you call this.setState({ dataEdited: {[name]: value} }); Thus only the last changed data will be present inside dataEdited

Solution

Seperately save the data or change setState function appropriately

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 02 '20 at 09:34

spc

447
2
6

Abdullah Abid · Answer 3 · 2020-04-02T10:27:52.463

0

You are overwriting the state variable dataEdited everytime you call

this.setState({ dataEdited: {[name]: value} });

so you want to change spread the object dataEdited and the state After that add or change the name,dob or day

  this.setState({
  ...this.state,
  dataEdited: { ...this.state.dataEdited, [name]: value }
});

CodeSandbox here

edited Apr 02 '20 at 10:27

answered Apr 02 '20 at 10:22

Abdullah Abid

1,541
3
10
24

Javascript object elements is undefined

3 Answers3

Problem

Solution