I have a function to delete elements from an array in the state given its index. Here it is:
<pre><code>removeFromRowsById(index) {
 console.log("IN REMOVE FUNCTION");
 const newList = this.state.rows1;
 newList.splice(index, 1);
 this.setState({ rows1: newList });
 }
</code></pre>I call it in my render method like this:
<pre><code> this.removeFromRowsById.bind(this, this.state.rows1.indexOf(this.returnValueToDelete(this.state.rows1[1]["id"])))
</code></pre>this.state.rows1.indexOf(this.returnValueToDelete(this.state.rows1[1][&quot;id&quot;])) returns the object inside rows1 that I want removed.
The problem is, when I call it, nothing happens. It seems like it never goes in the method since &quot;IN REMOVE FUNCTION&quot; never gets logged in the console. Any type of help i highly appreciated it. I&#39;m new to reactjs and I&#39;ve been working on this for quite some time. Thanks!

I have a function to delete elements from an array in the state given its index. Here it is:

```
removeFromRowsById(index) {
    console.log("IN REMOVE FUNCTION");
    const newList = this.state.rows1;
    newList.splice(index, 1);
    this.setState({ rows1: newList });
  }
``` 
I call it in my render method like this:


```
    this.removeFromRowsById.bind(this, this.state.rows1.indexOf(this.returnValueToDelete(this.state.rows1[1]["id"])))

```
this.state.rows1.indexOf(this.returnValueToDelete(this.state.rows1[1]["id"])) returns the object inside rows1 that I want removed.

The problem is, when I call it, nothing happens. It seems like it never goes in the method since "IN REMOVE FUNCTION" never gets logged in the console. Any type of help i highly appreciated it. I'm new to reactjs and I've been working on this for quite some time. Thanks!




I&#39;m finding it hard to understand your second code snippet. 
3 things -- 
<ol>
<li>As a suggestion, reducing number of lines of code should never affect the readability of the code so please split the code into variables and pass variables as parameters into the function at least here, so that we can understand your code&#39;s context.</li>
<li>You need to bind the function with this only if there is a different scope so you should bind the function inside JSX snippet and not needed inside the render function. </li>
<li>I&#39;m not able to figure out what exactly second code snippet is supposed to do because from what it looks like, it can be done inside a regular forEach() instead of map()</li>
</ol>

I'm finding it hard to understand your second code snippet. 
3 things -- 
1. As a suggestion, reducing number of lines of code should never affect the readability of the code so please split the code into variables and pass variables as parameters into the function at least here, so that we can understand your code's context.
2. You need to bind the function with *this* only if there is a different scope so you should bind the function inside JSX snippet and not needed inside the render function. 
3. I'm not able to figure out what exactly second code snippet is supposed to do because from what it looks like, it can be done inside a regular forEach() instead of map()

I&#39;ve updated the code to get rid of unnecessary stuff, Thanks

I've updated the code to get rid of unnecessary stuff, Thanks 

shouldn&#39;t you bind returnValueToDelete() function too?
Two tips in react incase you don&#39;t know: 
<ul>
<li>To make the code look less messy, you can bind the function outside the JSX itself be it inside any class function or inside constructor() like-- this.func = this.func.bind(this);</li>
<li>If you write arrow functions instead of normal class functions, you wouldn&#39;t need to bind the functions to class instance. For ex: instead of writing removeFromRowsById(index) {} this way, if you write like this removeFromRowsById = (index) =&gt; {} then you don&#39;t need to specifically bind the function anywhere as arrow functions implicitly take the parent scope.</li>
</ul>

shouldn't you bind *returnValueToDelete()* function too?

Two tips in react incase you don't know: 
- To make the code look less messy, you can bind the function outside the JSX itself be it inside any class function or inside *constructor()* like--  *this.func = this.func.bind(this);*
- If you write *arrow* functions instead of normal class functions, you wouldn't need to bind the functions to class instance. For ex: instead of writing * removeFromRowsById(index) {}* this way, if you write like this  *removeFromRowsById = (index) => {}* then you don't need to specifically bind the function anywhere as arrow functions implicitly take the parent scope.

If you can/want to put up your code on a repository or on codepen or something like that, we could work through it together

If you can/want to put up your code on a repository or on codepen or something like that, we could work through it together

reactjs method not being called in render method

Product

Explore

Company

Blogs

Support