Using component key to delete element from array Reactjs

Question

So my code works, but I just wanted clarification whether this is good coding practice or if it will cause problems later on.

As a bit of background this is similar to my previous question How to filter through array of components/elements in reactjs. But this time, instead of filtering an array of dom elements, I'm filtering an array of components. Here's how I did it:

Parent:

delete_this(index)
{   
    let key = index._reactInternalInstance._currentElement.key;
    this.repeats = this.repeats.filter( (item) =>  
    {   
        return item.key !== key;
    }); 
    this.setState({ repeats: this.repeats });  
}

Child:

delete_this(value)
{   
    this.props.delete_this(value);
}  
render()
{
    <button onClick={this.delete_this.bind(this, this)} ref={ (input) => { this.button = input; } }>delete</button>
}

I tried doing a filter on the object itself but it didn't work so I used the key instead.

Chris · Accepted Answer · 2017-01-04 01:23:21Z

2

As mentioned in your other question that is very similar to this, you should not be relying on internal property like _reactInternalInstance.

They're "private" and the React team can technically deprecate it at any time. I don't know the React teams policy on semver, but I highly doubt changes to an internal api count as a breaking change.

So to answer your question, yes it will possibly cause issues down the line.

You can simply pass in the id to the delete method directly:

<button onClick={() => this.props.delete_this(this.props.id)}>delete</button>

answered Jan 4, 2017 at 1:23

Chris

58.9k34 gold badges158 silver badges198 bronze badges

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

8 Comments

A. L Over a year ago

Yeah, at this point, I think it's probably just the same as passing in an id

Chris Over a year ago

It's actually quite different :) key is one of very few "special" attributes in React (unlike Angular which has a bunch of ng-this ng-that everywhere). From the 4 or 5 similar questions you have posted, you seem like you want to avoid the concept of ids or similar. I understand at the start you want to avoid added complexity, but nearly every app anything repeated will have a concept of ids (which is local to your app, but makes the repeated item unique), so you might as well use them. I really encourage you to go back and look at that codepen I posted in your other question

Chris Over a year ago

I'm not trying to hassle this point, but the map isn't the important part - its the way of thinking about state, and how it should flow down into the component. Regardless good luck

A. L Over a year ago

I just find that an infinitely increasing ID number to be somewhat odd/annoying, which is why I was just preferring to delete stuff by matching elements. But I'll use what's safer.

Chris Over a year ago

You don't actually have to self manage unique ids. As mentioned in the other answer, the example of unique id was very primitive. Most times you will be interacting with some persistant storage layer (such as a database) where you will simply be using the id provided by that. In which case all of this discussion (across both questions) becomes instantly a moot point

|

Collectives™ on Stack Overflow

Using component key to delete element from array Reactjs

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related