title: I want to update my state using an imported functions as my datastore
body: <p>I want to update my state but using a functions in a js file as my data store :
  this is my function:</p>
  <pre><code>   updatedItem(id, property) {
          this.list = this.list.map(
    (element) =&gt; element.id === id &amp;&amp; { ...element, ...property }
       );
       }
  
      fetchItems() {
       return this.list;
         }
  </code></pre>
  <p>and this is my react code:</p>
  <pre><code>  import React, { Component } from &quot;react&quot;;
    import &quot;./App.css&quot;;
    import Edit from &quot;./assets/edit.svg&quot;;
    import Delete from &quot;./assets/delete.svg&quot;;
  
    const lists = require(&quot;./datastore.js&quot;);
  
    export default class TodoListChuva extends Component {
    constructor(props) {
    super(props);
    const todos = new lists([]);
    this.state = {
    items: todos,
    currentItems: {
      description: &quot;&quot;,
      id: &quot;&quot;,
      isEditable: false,
    },
    errorMsg: &quot;&quot;,
    isEditable: false,
    editInput: {
      description: &quot;&quot;,
      id: &quot;&quot;,
    },
    };
  
  
      this.handleInput = this.handleInput.bind(this);
      this.handleEditInput = this.handleEditInput.bind(this);
      this.handleUpdateItem = this.handleUpdateItem.bind(this);
  
  
        handleInput(input) {
          this.setState({
          ...this.state,
          currentItems: {
          description: input,
          id: Date.now(),
          isEditable: false,
            },
            });
            }
  
  
  
         handleEditInput(input, id) {
           this.setState({
           ...this.state,
           editInput: {
           description: input,
           id: id,
              },
              });
              }
  
        //update item
        handleUpdateItem(id, property) {
        this.setState({
        ...this.state,
        ...this.state.items.updatedItem(id, property),
        });
        }
  </code></pre>
  <p>this is how im rendering them i dont have all the code in here beacause some i thing it not necessary but i cant identify my problem in here i click to update in my update button it erase the content from the other one and then gives me this warning &quot;Warning: Each child in a list should have a unique &quot;key&quot; prop.&quot;
  :</p>
  <pre><code>   render(){
     return(
  
  
           &lt;ul className=&quot;list&quot;&gt;
          {this.state.items.fetchItems() !== undefined &amp;&amp;
            this.state.items.fetchItems().map((item) =&gt; (
              &lt;li className=&quot;listItem&quot; key={item.id}&gt;
                {!item.isEditable ? (
                  &lt;p&gt;{item.description}&lt;/p&gt;
                ) : (
                  &lt;input
                    type=&quot;text&quot;
                    value={
                      this.state.editInput.description.length &gt; 0
                        ? this.state.editInput.description
                        : item.description
                    }
                    onChange={(e) =&gt;
                      this.handleEditInput(e.currentTarget.value, item.id)
                    }
                  /&gt;
                )}
                &lt;span&gt;
                  &lt;button
                    type=&quot;button&quot;
                    onClick={() =&gt; {
                      this.handleUpdateItem(item.id, { isEditable: true });
                    }}
                  &gt;
  
        )
      }
  </code></pre>