Can we pass fake keys to children in React.js?

Question

I have created a component and it's running well in local server. But I am getting below warning

Warning: Each child in a list should have a unique "key" prop.

Getting this warning means we need to fix the key index props? as given here. below is some snippets of my component code..

    render() {
        return (
            <div>
                        <Container>                                                           
                            <Row>                                                           
                                <Col className="col-12">
                                {this.state.client.map((val,index)=>{
                                    if(index == this.state.colaborators.length -1)
                                        return <a href={"/users/"+val}>{val}</a>
                                    return <a href={"/users/"+val}>{val} ,</a>
                                })}
                                </Col>                                                              
                            </Row>
                        </Container>             
                    </div>
                </div>
            </div >
        );
    }
}

export default App;

I checked some solution from here

As I told my code is working well. Can we use some fake key props? for example

key={fake index}

And we are using will this affect in my working code?

T.J. Crowder · Accepted Answer · 2021-02-04T11:13:16.630

If this.state.client ever changes, don't just use the index (which is sadly common); see this article for why and its demo of what can go wrong. You can only do that with a list that never changes, or only grows/shrinks (and not at the same time), not with one where the order changes (you insert at the beginning, or sort, or...) More in the docs.

I'm guessing val will be unique in the list, so use that as the key:

{this.state.client.map((val, index) => {
    const href = "/users/" + val;
    const display = index == this.state.colaborators.length - 1 ? val : `${val} ,`;
    return <a key={val} href={href} >{display}</a>;
})}

YTG · Answer 2 · 2021-02-04T11:00:14.320

1

If your lists order is not going to change, simply use:

  return <a key={index} href={"/users/"+val}>{val}</a>
     return <a key={index} href={"/users/"+val}>{val} ,</a>

It will not affect your code and it will remove the warning.

edited Feb 04 '21 at 11:00

answered Feb 04 '21 at 09:02

YTG

956
2
6
19

If the items in `this.state.client` ever change order, this will not work correctly. – T.J. Crowder Feb 04 '21 at 09:04
1

This can result in some unexpected behaviour. See [this post](https://stackoverflow.com/a/46735689/3257622) with some great answers. – Reyno Feb 04 '21 at 09:05
Eslint will always advise against using `index` as keys, moreover it's just not a correct approach due to performance reasons. – Konstantin Feb 04 '21 at 09:05
A lot of the time elements don't really have any unique properties except for their index – mousetail Feb 04 '21 at 09:07
@mousetail - The solution to that is to give them a unique property, not to use their index. (Unless the list is unchanging or only shrinks/grows, never *reorders* [like adding at the beginning, or sorting]. Index is good enough then. But a **lot** of lists get reordered, and index will produce incorrect results.) – T.J. Crowder Feb 04 '21 at 10:11
@T.J.Crowder That is true, but in the many applications I have worked on a list changing order is very rare. I think using index is fine as long as you keep in mind that reordering or deleting elements will not work properly. – mousetail Feb 04 '21 at 10:13
@mousetail - All I can do is refer to the [React docs](https://reactjs.org/docs/lists-and-keys.html#keys): *"We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance **and may cause issues with component state**. Check out Robin Pokorny’s article for an [in-depth explanation on the negative impacts of using an index as a key](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318)..."* *(my emphasis)* [This demo](https://jsbin.com/wohima/edit?output) from the article shows the weird state issue. – T.J. Crowder Feb 04 '21 at 10:49
@T.J.Crowder I completely agree. Use a proper key if *the order may change*. If there is no easy key to find and the order cannot change you can use the index. – mousetail Feb 04 '21 at 10:54
1

@T.J.Crowder I edited the answer, to make sure no harm will happen. – YTG Feb 04 '21 at 11:00
@mousetail - Yeah, if the order doesn't change, it's fine (I did mention that above :-) ). – T.J. Crowder Feb 04 '21 at 11:11

Can we pass fake keys to children in React.js?

2 Answers2