title: Replace item inside state array
body: <p>I've been researching for a while about how to replace the item if it's already exist inside state array but I couldn't find a propitiate solution<br>
  <a href="https://codesandbox.io/s/4xl24j7r69" rel="nofollow noreferrer">https://codesandbox.io/s/4xl24j7r69</a></p>
  
  <pre><code>import React from 'react';
  
  
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: [
          {
            "userId": 1,
            "id": 1,
            "title": "One",
            "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
          },
          {
            "userId": 1,
            "id": 2,
            "title": "Two",
            "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
          },
        ]
      }
    }
  
    add = () =&gt; {
      this.setState(prevState =&gt; ({
  
        data: [...prevState.data,
        {
          "userId": 1,
          "id": 2,
          "title": "Two New",
          "body": "new data",
        }// this item already exist so I want to replace it to new data
        ]
      }))
    };
    render() {
      return (
        &lt;div&gt;
          {this.state.data.map((data) =&gt;
            &lt;ul key={data.id}&gt;
              &lt;li&gt;{data.title}&lt;/li&gt;
            &lt;/ul&gt;
          )}
          &lt;button onClick={this.add}&gt;Replace&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  export default App;
  </code></pre>
  
  <p>I tried to make like this but it's doesn't work</p>
  
  <pre><code> add = () =&gt; {
      this.setState(prevState =&gt; ({
        data: prevState.data.filter(item =&gt; this.state.data.indexOf(item.id) !== -1).slice(0, 5), // this not working
        data: [...prevState.data,
        {
          "userId": 1,
          "id": 2,
          "title": "Two New",
          "body": "new data"
        }
        ]
      }))
    };
  </code></pre>
  
  <p>How can I update the item if it's already exist?</p>