title: React: Updating one state property removes other states properties in the state
body: <p>I have two text boxes with <code>id</code> set dynamically as <code>en</code> which can change. Every time the onchange is emittted from input field, the state should update. The problem is, if I type something into one of the  inputs, the other input state seems to disappear. For example, If I type <code>test</code> into <code>title</code> text field, the state becomes:</p>
  
  <pre><code>this.state = {
              translation: {
                  en: {
                      title: 'test'
                  }
              }
          };
  </code></pre>
  
  <p>If I move on to typing into the content text box, it seems to replace the title state. like so,</p>
  
  <pre><code>this.state = {
              translation: {
                  en: {
                      content: 'content'
                  }
              }
          };
  </code></pre>
  
  <p>They should update the state independently without affecting each other. Here is my intended <strong><code>state</code></strong></p>
  
  <pre><code>this.state = {
              translation: {
                  en: {
                      title: 'title-text',
                      content: 'content-text'
                  }
              }
          };
  </code></pre>
  
  <p><strong><code>Component</code></strong></p>
  
  <pre><code>import React from 'react';
  
  export default class Demo extends React.Component
  {
      constructor(props)
      {
          super(props);
  
          // default state
          this.state = {
              translation: {}
          };
      }
  
      onSubmit(e)
      {
          e.preventDefault();
          console.log(this.state);
      }
  
      render()
      {
          return (
  
              &lt;form onSubmit={(event) =&gt; this.onSubmit(event)}&gt;
  
                      &lt;input id="en" name="title"
                             onChange={(event) =&gt; this.setState({
                                 translation: {
                                     [event.target.id]: {
                                       title: event.target.value
                                     }
                                 }
                     })} /&gt;
  
                      &lt;input id="en" name="content"
                                onChange={(event) =&gt; this.setState({
                                    translation: {
                                        [event.target.id]: {
                                            content: event.target.value
                                        }
                                    }
                        })} /&gt;
  
                      &lt;button type="submit"&gt;Login&lt;/button&gt;
  
  
              &lt;/form&gt;
  
          );
      }
  }
  </code></pre>