title: Javascript object elements is undefined
body: <p>Trying to log the values of <em>name</em>, <em>day</em> and <em>dob</em> elements stored in <em>dataEdited</em> as object.Two of the elements display <em>Undefined</em> with just one displaying the correct value.
  Here is the code</p>
  
  <pre><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 }) */
  
      }   
  
  </code></pre>
  
  <p>State</p>
  
  <pre><code>this.state = {
              name: '',
              day: '',
              dob: '',
              items : [],
              currentItem: {},
              dataEdited: {},
              toggle: false,
              loading: false
          }
  </code></pre>
  
  <p>Render </p>
  
  <pre><code>&lt;form onSubmit={this.handleUpdate}&gt;
                                  &lt;input 
                                      className=""
                                      name="name"                             
                                      onChange={this.dataChange}
                                      defaultValue={this.state.currentItem.name}
                                      placeholder= "Celebrant's Name" 
                                      ref={name =&gt; this.name = name}
                                      required /&gt; 
                                  &lt;input 
                                      className=""
                                      type="number" 
                                      name="day"
                                      min="1" 
                                      max="31"
                                      ref={day =&gt; this.day = day}
                                      onChange={this.dataChange}
                                      defaultValue={this.state.currentItem.day}
                                      placeholder= "day"  /&gt;
                                  &lt;input 
                                      className=""
                                      name="dob"
                                      type="month"                                
                                      onChange={this.dataChange}
                                      defaultValue={this.state.currentItem.dob} /&gt;
  
                                  &lt;button type="submit"&gt;update&lt;/button&gt;
                                  &lt;button onClick={this.handleEditCancel}&gt;cancel&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>This is the result on the console</p>
  
  <pre><code>undefined undefined "2020-08"
  </code></pre>
  
  <p>I don't understand how this is possible, can I get an explanation. Also, how can I fix this?</p>