array.splice() deleting wrong element

Question

I'm a beginner to react js and was wondering why the splice() method wasn't working properly for me. My method is here:

removePara = index => {
    let array = [...this.state.paras];
    for (let x = 0; x < this.state.count; x++) {
      try {
        if (array[x].props.id == index) {
          array.splice(x, 1);
        }
      } catch (e) {}
    }
    this.setState({ paras: array });
  };

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:

I am pressing delete for middle one but this happens:

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:

//index.js
const rootElement = document.getElementById("root");

class App extends React.Component {
  state = {
    paras: [],
    count: 0
  };

  addPara = () => {
    this.setState({
      paras: [
        ...this.state.paras,
        <Paragraph id={this.state.count++} remove={this.removePara} />
      ]
    });
  };

  removePara = index => {
    let array = this.state.paras.filter(e => e.props.id !== index);
    this.setState({ paras: array });
  };

  render() {
    return (
      <div>
        {this.state.paras}
        <div className="btn btn-warning" id="add" onClick={this.addPara}>
          Add Paragraph
        </div>
        <div name="count">{this.state.count}</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, rootElement);

//Paragraph.js
class Paragraph extends React.Component {
  render() {
    let style = {
      height: "150px",
      marginBottom: "10px"
    };

    return (
      <div className="paragraph" id={this.props.id}>
        <div className="row">
          <div className="col-sm-11">
            <textarea
              className="form-control"
              name={"paragraph" + this.props.id}
              placeholder="Put Paragraph Here"
              style={style}
              required
            ></textarea>
          </div>
          <div className="col-sm-1">
            <div
              className="btn btn-danger del-rotate"
              onClick={() => this.props.remove(this.props.id)}
            >
              &times;
            </div>
          </div>
        </div>
      </div>
    );
  }
}

<!--index.html-->
<html>

<head>
    <script type="application/javascript" src="../reactjs/react.js"></script>
    <script type="application/javascript" src="../reactjs/react-dom.js"></script>
    <script type="application/javascript" src="../reactjs/babel.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/styles.css">
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css">
    <script type="text/babel" src="Components/Paragraph.js"></script>
    <script type="text/babel" src="index.js"></script>
</head>

<body id="body">
    <div class="container-fluid">
        <br>
        <br>
        <div class="row">
            <div class="col-sm-1"></div>
            <div class="col-sm-10">
                <div align="center">
                    <h1>Write Article</h1>
                </div>
                <br>
                <form action="submit-article.php" method="POST">
                    <input class="form-control input-sm" type="text" placeholder="Enter Title" name="title"
                        style="width: 35%" autofocus required></input>
                    <br>
                    <div id="root"></div>
                    <br>
                    <input class="btn btn-success float-right" type="submit" value="Done">
                </form>
            </div>
        </div>
    </div>
</body>

</html>

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

The trouble relates to mutating the array while iterating. Use the loop to build a new array. The built in function for that is filter. array = array.filter(e => e.props.id != index) — danh
– danh, Commented Feb 27, 2020 at 15:32
So what should I do exactly? I've built an array, which is a temporary copy of a state variable I've used, called paras — Papaya
– Papaya, Commented Feb 27, 2020 at 15:33

Taki · Accepted Answer · 2020-02-27 15:33:44Z

2

Probably the index you're passing is incorrect,

Array.filter would be more appropriate for this kind of task :

removePara = index => {
  let array = this.state.paras.filter(e => e.props.id !== index);
  this.setState({ paras: array });
};

answered Feb 27, 2020 at 15:33

Taki

17.7k5 gold badges28 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

danh Over a year ago

We even chose "e" for element simultaneously :-) !!

Papaya Over a year ago

Thanks for the quick reply, but even when I use this, the same thing happens. And I'm really sure that I'm getting my index correct

Taki Over a year ago

if you're dead sure you have the right index, then maybe the numbers you're displaying in the pages are incorrect, can you add the code for that please ?

danh Over a year ago

It sure looks like a zero-based array referring to 1-based set of div ids. Not positive how props.id is initialized, so test this idea with this.props.remove(this.props.id-1)

Papaya Over a year ago

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

Collectives™ on Stack Overflow

array.splice() deleting wrong element

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related