title: advice with removing object from react state array
body: <p>So this has me puzzled. I've been banging my head against the wall trying to figure this out.</p>
  <p>So I am trying to remove an object from a state managed array. I don't believe I am mutating the array.</p>
  <p>I am using prevState. My delete function which gets sent to another component</p>
  <pre><code>{this.state.educationArray.map((item, i) =&gt; (&lt;RenderEducation education={item} onDelete={this.handleDelete} /&gt;))}
  </code></pre>
  <p>Sending back the id to the handleDelete function.</p>
  <p>My handleDelete:</p>
  <pre class="lang-js prettyprint-override"><code>handleDelete = itemId =&gt; {
    //const newStudy = this.state.educationArray.filter(item =&gt; { return item.id !== itemId });
    //this.setState({ educationArray: newStudy })
  
    let tempArray = [];
    let num = this.state.educationArray.length;
  
    for (let i = 0; i &lt; num;) {
      //console.log(&quot;itemId is: &quot;, itemId)
      let tempId = this.state.educationArray[i].id
      if (tempId != itemId) {
        let obj = this.state.educationArray[i]
        tempArray.push(obj)
      }
      i++
    }
    this.setState(prevState =&gt; ({ educationArray: tempArray }));
  }
  </code></pre>
  <p>Stack Snippet w/loop:</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const { useState } = React;
  
  class Example extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              educationArray: [
                  { id: 1, name: "One" },
                  { id: 2, name: "Two" },
                  { id: 3, name: "Three" },
              ],
          };
      }
  
      handleDelete = (itemId) =&gt; {
          // const newStudy = this.state.educationArray.filter(item =&gt; { return item.id !== itemId });
          // this.setState({ educationArray: newStudy })
  
          let tempArray = [];
          let num = this.state.educationArray.length;
  
          for (let i = 0; i &lt; num; ) {
              //console.log("itemId is: ", itemId)
              let tempId = this.state.educationArray[i].id;
              if (tempId != itemId) {
                  let obj = this.state.educationArray[i];
                  tempArray.push(obj);
              }
              i++;
          }
          this.setState((prevState) =&gt; ({ educationArray: tempArray }));
      };
  
      render() {
          return (
              &lt;ul&gt;
                  {this.state.educationArray.map((element) =&gt; (
                      &lt;li key={element.id}&gt;
                          {element.name}{" "}
                          &lt;input type="button" value="Del" onClick={() =&gt; this.handleDelete(element.id)} /&gt;
                      &lt;/li&gt;
                  ))}
              &lt;/ul&gt;
          );
      }
  }
  
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(&lt;Example /&gt;);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="root"&gt;&lt;/div&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Stack Snippet w/<code>filter</code>:</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const { useState } = React;
  
  class Example extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              educationArray: [
                  { id: 1, name: "One" },
                  { id: 2, name: "Two" },
                  { id: 3, name: "Three" },
              ],
          };
      }
  
      handleDelete = (itemId) =&gt; {
          const newStudy = this.state.educationArray.filter(item =&gt; { return item.id !== itemId });
          this.setState({ educationArray: newStudy })
          /*
  
          let tempArray = [];
          let num = this.state.educationArray.length;
  
          for (let i = 0; i &lt; num; ) {
              //console.log("itemId is: ", itemId)
              let tempId = this.state.educationArray[i].id;
              if (tempId != itemId) {
                  let obj = this.state.educationArray[i];
                  tempArray.push(obj);
              }
              i++;
          }
          this.setState((prevState) =&gt; ({ educationArray: tempArray }));
          */
      };
  
      render() {
          return (
              &lt;ul&gt;
                  {this.state.educationArray.map((element) =&gt; (
                      &lt;li key={element.id}&gt;
                          {element.name}{" "}
                          &lt;input type="button" value="Del" onClick={() =&gt; this.handleDelete(element.id)} /&gt;
                      &lt;/li&gt;
                  ))}
              &lt;/ul&gt;
          );
      }
  }
  
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(&lt;Example /&gt;);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="root"&gt;&lt;/div&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I've tried using the 2 lines commented out, I've tried rearranging how I do the for loop, its always the same result, it never removes the intended id.</p>
  <p>I have sent console.log after console.log of the ids getting moved around and every seems to be working, but when it comes right now to push the specific objects that don't match the id to the temp array it never works and the object add the end gets removed.</p>
  <p>Please and thank you for your advice</p>
  <p>EDIT:
  i call the handleDelete inside RenderEducation component:</p>
  <pre><code>&lt;button onClick={() =&gt; this.props.onDelete(this.state.id)}&gt; X - {this.state.id}&lt;/button&gt;
  </code></pre>
  <p>from each 
  and my constructor:</p>
  <pre><code>constructor(props) {
              super(props);
              this.state = {
                    educationArray: [],
  
              }
        }
  </code></pre>
  <p>and how i add to the array:</p>
  <pre><code>addEducation = (e) =&gt; {
              e.preventDefault();
              this.setState(prevState =&gt; ({
                    educationArray: [...prevState.educationArray, {
                          id: uniqid(),
                          school: '',
                          study: '',
                          dateFrom: '',
                          dateTo: '',
                          editing: true,
                    }]
              }))
        }
  </code></pre>