Why am I getting a warning of not having a unique key?

Question

This is my render

render() {
    let products = this.state.products  
    return (
      <ul>
        {products.map((product, index) => Product({ key: index, product: product }))}          
      </ul>
    );
  }

I am using a unique key, and still get the warning

Warning: Each child in an array or iterator should have a unique "key" prop.

score 1 · Answer 1 · answered May 04 '19 at 01:48

1

I found this for you.

How to create unique keys for React elements?

It seems like you need to have a return for the key. Or, as it states, npm packages already exist to declare unique keys.

answered May 04 '19 at 01:48

Ethan Moore

383
1
5
18

score 1 · Accepted Answer · answered May 04 '19 at 01:51

1

That's not how you return a Component or pass it the key prop (or any other props...)

<ul>
    {products.map((product, index) => (
        <Product key={index} product={product} />
    ))}
</ul>

https://reactjs.org/docs/components-and-props.html#composing-components

answered May 04 '19 at 01:51

SakoBu

3,972
1
16
33

1

Does it matter if `Product` is a functional component? Those should accept props in as a parameter? – HPierce May 04 '19 at 01:59
1

The [React docs](https://reactjs.org/docs/components-and-props.html#function-and-class-components) (See `Welcome()`) say otherwise. And I just make a plunk that showed that OP's syntax is fine :( – HPierce May 04 '19 at 02:12
@HPierce We are talking about 2 different things.... Product can be a functional component and receive the props as the docs suggest... But passing the props to that functional component is as I pointed out... Look at the docs again... – SakoBu May 04 '19 at 03:21
@SakoBu I read you could do it both ways https://stackoverflow.com/questions/46965309/react-functional-component-calling-as-function-vs-as-component – user3808307 May 04 '19 at 17:55
It's not new and I encourage you to do some research about the limitations of it... https://medium.com/missive-app/45-faster-react-functional-components-now-3509a668e69f (go down into the comments....) – SakoBu May 04 '19 at 18:04
Also, in a 'real-world' app you should never use the index as the key... – SakoBu May 04 '19 at 18:06
@SakoBu "Also, in a 'real-world' app you should never use the index as the key." why not – user3808307 May 04 '19 at 22:39
Let me rephrase that... if they the array is never going to change then it's fine but if you remove an element from the array (most real-world apps and use cases) then you can see how the index as a key would get messed up... @user3808307 – SakoBu May 05 '19 at 20:21

score 1 · Answer 3 · answered May 04 '19 at 01:54

1

You are not passing child elements to the ul

render() {
    let products = this.state.products  
    return (
      <ul>
        {products.map((product, index) => 
          <li key={index}>
            {product}
          </li>}          
      </ul>
    );
  }

answered May 04 '19 at 01:54

Aditya Thakur

2,562
2
10
21

So there is no way to not get the warning when calling the component as a function then? I will always get the warning? That shouldn't be so, because then I am forced to not to, which supposedly is ok – user3808307 May 04 '19 at 17:57
The
part is in the Product component, I am not supposed to change it

user3808307

May 04 '19 at 18:03

score 1 · Answer 4 · answered May 04 '19 at 02:22

I'm seeing this:

function Product(props) {
  return (
     <p key={props.key}>{props.product}</p> 
  )
}

function Main(props) {
  let products = [ "foo", "bar", "baz"];
  return (
    <ul>
      {products.map((product, index) => Product({key: index, product: product }))}        
    </ul>
  );
}

ReactDOM.render(
  <Main></Main>,
  document.getElementById('example')
);

and this:

function Product(props) {
  return (
     <p>{props.product}</p> 
  )
}

function Main(props) {
  let products = [ "foo", "bar", "baz"];
  return (
    <ul>
      {products.map((product, index) => (
        <li key={index}>
          {Product({product: product })}
        </li>
      ))}    
    </ul>
  );
}

ReactDOM.render(
  <Main></Main>,
  document.getElementById('example')
);

Do what you're trying to accomplish.

If I had to guess (I don't have high confidence in this explanation), I would suspect that React requires a key prop on child components to so that it can quickly determine which elements need to be re-rendered when state changes. Therefore, passing a key prop won't actually achieve anything unless it's actually rendered as UI. The two examples above are rendering keys to the virtual DOM in the <p> and <li> respectively.

I will try this, thank you, i will have to repeat the key though, because I need it as a prop in the Product component Edit: I can't do this, because the

Why am I getting a warning of not having a unique key?

4 Answers4