title: React - How to loop and update values in object model?
body: <p>I have an object model pattern as below</p>
  <pre><code>   this.state = {
          data: {
              audi: {
                   engine: '2.5',
                   gearbox: 'auto',
                   fuel: 'petrol'
               },
               bmw: {
                   engine: '3.0',
                   gearbox: 'auto',
                   fuel: 'petrol'
               },
               merc: {
                   engine: '6.3',
                   gearbox: 'manual',
                   fuel: 'petrol'
               }
           }
      }
  </code></pre>
  <p><strong>My goal is to:</strong></p>
  <ol>
  <li>Loop through the data and render</li>
  <li>Map value changes in the HTML to
  the corresponding keys in the this.state.data object</li>
  </ol>
  <p><em>I haven't used an Array, as it has to look like above object pattern when posting it.</em></p>
  <p>At the moment here is how I am trying to do this:</p>
  <pre><code>//To render
  Object.entries(this.state.data).map((x,index) =&gt;
      &lt;p&gt;x.key&lt;/p&gt; //Trying to reach 'audi' with x.key
  
      // Render each KPV in object
      {x.key}: &lt;input key={index} onChange={this.handleChange} value={x.value}/&gt;
  )
  </code></pre>
  <p>Then to update the corresponding values in the same state model:</p>
  <pre><code>// To update the state model with changed values
  setData = (key, val) =&gt; {
      this.setState(state =&gt; ({
          data: {
              ...state.data,
              obj: { [key]: val },
              //Don't know how to map to state properly!
          }
      }));
  };
  
  // Handle input change
  handleChange = key =&gt; e =&gt; {
      this.setData(key, e.target.value);
  };
  </code></pre>
  <p>Please could anyone advise me on this approach, many thanks :)</p>