title: array.splice() deleting wrong element
body: <p>I'm a beginner to react js and was wondering why the splice() method wasn't working properly for me. My method is here:</p>
  
  <pre class="lang-js prettyprint-override"><code>removePara = index =&gt; {
      let array = [...this.state.paras];
      for (let x = 0; x &lt; this.state.count; x++) {
        try {
          if (array[x].props.id == index) {
            array.splice(x, 1);
          }
        } catch (e) {}
      }
      this.setState({ paras: array });
    };
  </code></pre>
  
  <p>So I'm passing an index, and if an element's id matches the index, the element is removed. I'v used a try-catch cause not all indexes are there (they might've been deleted through the same function). Here's and image of three elements:
  <a href="https://i.stack.imgur.com/xhnLf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xhnLf.png" alt="enter image description here"></a></p>
  
  <p>I am pressing delete for middle one but this happens:
  <a href="https://i.stack.imgur.com/Ouhqo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ouhqo.png" alt="enter image description here"></a></p>
  
  <p>Instead of the second one getting deleted, the last one gets deleted. How do I fix this? I know that my button's onclick works fine. Full code below:</p>
  
  <pre><code>//index.js
  const rootElement = document.getElementById("root");
  
  class App extends React.Component {
    state = {
      paras: [],
      count: 0
    };
  
    addPara = () =&gt; {
      this.setState({
        paras: [
          ...this.state.paras,
          &lt;Paragraph id={this.state.count++} remove={this.removePara} /&gt;
        ]
      });
    };
  
    removePara = index =&gt; {
      let array = this.state.paras.filter(e =&gt; e.props.id !== index);
      this.setState({ paras: array });
    };
  
    render() {
      return (
        &lt;div&gt;
          {this.state.paras}
          &lt;div className="btn btn-warning" id="add" onClick={this.addPara}&gt;
            Add Paragraph
          &lt;/div&gt;
          &lt;div name="count"&gt;{this.state.count}&lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;App /&gt;, rootElement);
  
  </code></pre>
  
  <pre><code>//Paragraph.js
  class Paragraph extends React.Component {
    render() {
      let style = {
        height: "150px",
        marginBottom: "10px"
      };
  
      return (
        &lt;div className="paragraph" id={this.props.id}&gt;
          &lt;div className="row"&gt;
            &lt;div className="col-sm-11"&gt;
              &lt;textarea
                className="form-control"
                name={"paragraph" + this.props.id}
                placeholder="Put Paragraph Here"
                style={style}
                required
              &gt;&lt;/textarea&gt;
            &lt;/div&gt;
            &lt;div className="col-sm-1"&gt;
              &lt;div
                className="btn btn-danger del-rotate"
                onClick={() =&gt; this.props.remove(this.props.id)}
              &gt;
                &amp;times;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <pre><code>&lt;!--index.html--&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;script type="application/javascript" src="../reactjs/react.js"&gt;&lt;/script&gt;
      &lt;script type="application/javascript" src="../reactjs/react-dom.js"&gt;&lt;/script&gt;
      &lt;script type="application/javascript" src="../reactjs/babel.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="../css/styles.css"&gt;
      &lt;script src="../bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css"&gt;
      &lt;script type="text/babel" src="Components/Paragraph.js"&gt;&lt;/script&gt;
      &lt;script type="text/babel" src="index.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body id="body"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-1"&gt;&lt;/div&gt;
              &lt;div class="col-sm-10"&gt;
                  &lt;div align="center"&gt;
                      &lt;h1&gt;Write Article&lt;/h1&gt;
                  &lt;/div&gt;
                  &lt;br&gt;
                  &lt;form action="submit-article.php" method="POST"&gt;
                      &lt;input class="form-control input-sm" type="text" placeholder="Enter Title" name="title"
                          style="width: 35%" autofocus required&gt;&lt;/input&gt;
                      &lt;br&gt;
                      &lt;div id="root"&gt;&lt;/div&gt;
                      &lt;br&gt;
                      &lt;input class="btn btn-success float-right" type="submit" value="Done"&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>But the element which matches the id gets deleted, like in the elements, its not there, but the input of the one that gets deleted just gets into another element. Like in the example above in the pictures</p>