title: Why, when adding two or more identical objects to state in a row, they always generate the same key?
body: <p>I'm learning React and i'm stuck on this problem. I've looked for answers but couldn't find why this exact thing was happening.</p>
  
  <p>When i fill in a form and submit it, a new object gets added to the state. No matter how i generate random key (for example in code below i do it with date object and getTime method), when i add two or more identical objects to the state in a row (one exactly after the other), they always generate the same key, same with math.random and all other methods i've tried.</p>
  
  <p>If i add one object and then change any data even a little bit and add another and then add the same as the first one, everything works perfectly. The only problem is when i try to add the same ones in a row.</p>
  
  <p>By identical objects i mean that all their {key: value} pairs contain the same data and they have the same keys.</p>
  
  <p>This is how my state objects like like:</p>
  
  <pre><code>state = {
      dmd: [
        {name: 'dmd', age: 69, rich: 'yes', id: 1},
        {name: 'lk', age: 19, rich: 'true', id: 2},
        {name: 'tm', age: 83, rich: 'aye', id: 3}
      ]
    }
  </code></pre>
  
  <p>Note that when i have this initial state already hard coded, when i add a new object that's the same as the 3rd one, the error doesn't occur. It's just when creating new ones.</p>
  
  <p>newDmd object that is passed to addDmd method would not have id at first and would look like this:</p>
  
  <pre><code>{name: 'john', age: 22, rich: 'yes'}
  </code></pre>
  
  <p>Method used to change state:</p>
  
  <pre><code>  addDmd = (newDmd) =&gt; {
      newDmd.id = new Date().getTime();
      let newArray = [...this.state.dmd, newDmd];
      this.setState({
        dmd: newArray
      });
    }
  </code></pre>
  
  <p>The image below is to show you when the keys become the same (my key is 'id'). You can see that on the last 3 additions, the key is the same, starting to repeat after the second one:</p>
  
  <p>I don't have enough reputation points to post an image, so here's a link: <a href="https://i.imgur.com/WQrVHlp.png" rel="nofollow noreferrer">https://i.imgur.com/WQrVHlp.png</a></p>
  
  <p>I would like to know:</p>
  
  <ol>
  <li>Why this happens</li>
  <li>How to fix this</li>
  <li>Best practices regarding changing state and generating unique keys</li>
  </ol>
  
  <p>Edit:
  Adding code from where addDmd method is called.</p>
  
  <pre><code>class AddDmd extends Component {
      state = {
          name: null,
          age: null,
          rich: null
      };
  
      handleChange = (e) =&gt; {
          this.setState({
              [e.target.id]: e.target.value
          });
      }
  
      handleSubmit = (e) =&gt; {
          e.preventDefault();
          this.props.addDmd(this.state);
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;form onSubmit={this.handleSubmit}&gt;
                      &lt;label htmlFor="name"&gt;Name:&lt;/label&gt;
                      &lt;input type="text" id="name" onChange={this.handleChange}&gt;&lt;/input&gt;
                      &lt;label htmlFor="age"&gt;Age:&lt;/label&gt;
                      &lt;input type="text" id="age" onChange={this.handleChange}&gt;&lt;/input&gt;
                      &lt;label htmlFor="rich"&gt;rich?:&lt;/label&gt;
                      &lt;input type="text" id="rich" onChange={this.handleChange}&gt;&lt;/input&gt;
                      &lt;button&gt;Submit&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>Edit 2: added full code of class where addDmd method resides.</p>
  
  <pre><code>class App extends Component {
    state = {
      dmd: [
        {name: 'dmd', age: 69, rich: 'yes', id: 1},
        {name: 'lk', age: 19, rich: 'true', id: 2},
        {name: 'tm', age: 83, rich: 'aye', id: 3}
      ]
    }
  
    addDmd = (newDmd) =&gt; {
      newDmd.id = new Date().getTime();
      let newArray = [...this.state.dmd, newDmd];
      this.setState({
        dmd: newArray
      });
    }
  
    render() {
      return (
        &lt;div className="App" &gt;
          &lt;AddDmd addDmd={this.addDmd} /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>