Two children with the same key in React component

Question

I know that there are similar questions to this one, I've tried them both (1), (2) and didn't work for my case.

Having an array of objects on props:

this.props.items = [ { name: 'a', price: 10},
                     { name: 'b', price: 20},
                     { name: 'c', price: 10},
                     { name: 'd', price: 30},
                   ];

I want to create a list with all the price options and put that unique values on a dropdown so I'm doing this:

  const priceOptions = [{ text: '', value: '' }];

  const prices = [
    ...new Set(this.props.items.map(item => item.price)),
  ];
  prices.forEach(price => {
    if (price) {
      priceOptions.push({
        key: price,
        text: price,
        value: price,
      });
    }

this code throws the error:

Warning: Encountered two children with the same key, ellipsisItem-NaN. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Don't know what does ellipsisItem mean, that variable is not in the project.

I've read on the other questions' answers that it should be used the index instead of the element. So I changed it to:

  const prices = [
    ...new Set(this.props.items.map(item => item.price)),
  ];
  prices.forEach((price, index) => {
    if (price) {
      priceOptions.push({
        key: index,
        text: price,
        value: price,
      });
    }
  });

but it throws the same error.

It is possible that in the array of objects to have more objects with same price but on dropdown it should show only the unique values.

From 10, 20, 10, 30 to 10, 20, 30

UPDATE I'm adding also where it is rendered.

return (
  <Layout>
     ...
     <Dropdown
        placeholder="Price"
        onChange={this.searchHandlerPrice}
        options={priceOptions}
     />

and the searchHandlerPrice:

  searchHandlerPrice = (event, data) => {
    const { getItems } = this.props;
    geItems({
      name: this.props.query.name,
      price: data.value,
    });
  };

and < Dropdown >:

import React from 'react';
import { Dropdown } from 'semantic-ui-react';

import './Dropdown.styles.scss';

export default ({placeholder, options, onChange}) => {
    return (
        <Dropdown className="hello-dropdown"
            placeholder={placeholder}
            search
            selection
            options={options}
            onChange={onChange}
            clearable
        />
    );
};

To me it looks like a problem with whatever creates the `ellipsisItem` key. Have you tried looking for where that is coming from? — Ján Jakub Naništa, May 28 '20 at 18:51
Hi! You didn't show the code where you actually render the list in a React component. Could you do that? — nicoqh, May 28 '20 at 18:52
I searched for that variable but it does not appear on results. It's not in the project — Leo Messi, May 28 '20 at 18:52
@artfulbeest, it is mine. I added it to the end of the question — Leo Messi, May 28 '20 at 19:12
Still can not reproduce this on my end ... how about component where you render 'list with all the price options' ? — artfulbeest, May 28 '20 at 19:37
Sorry!, Can't join now..but I think problem could be where you render that list, I have tried to render options with Dropdown and it works — artfulbeest, May 28 '20 at 19:45
I prefer using my array indices as element keys, this guarantees no two children will have same key — artfulbeest, May 28 '20 at 19:46
Are you sure error comes from dropdown? What if you comment it ? If yes, what does contain options, are we sure its an array [{item:'', value:''}] can you dump it ? NB: I would hint that you should ensure to give string, not number (for text and value) — grodzi, May 28 '20 at 19:51

score 0 · Answer 1 · answered May 29 '20 at 06:56

Not sure where the problem lies. However, I recreated this problem using MATERIAL UI's SELECT tag and everything seems to be working fine.

In App.js

class App extends React.Component {
  items = [
    { name: "a", price: 10 },
    { name: "b", price: 20 },
    { name: "c", price: 10 },
    { name: "d", price: 30 }
  ];

  render() {
    return (
      <div className="App">
        <Select items={this.items} />
      </div>
    );
  }
}

export default App;

in Select.js

export default function SelectForm(props) {
  const classes = useStyles();
  const [price, setPrice] = React.useState("");
  const [uniquePrice, setUniquePrice] = React.useState([]);

  React.useEffect(() => {
    const newPrice = [...new Set(props.items.map(item => item.price))];
    setUniquePrice(newPrice);
  }, [props]);

  const handleChange = event => {
    setPrice(event.target.value);
  };

  return (
    <div className="App">
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-label">Price List</InputLabel>
        <Select value={price} onChange={handleChange}>
          {uniquePrice.map(price => (
            <MenuItem key={price} value={price}>
              {price}
            </MenuItem>
          ))}
        </Select>
        <p>Selected Value: {price}</p>
      </FormControl>
    </div>
  );
}

Checkout the following codeSandbox

https://codesandbox.io/s/material-ui-dropdown-yybhq

Hope this helps

Two children with the same key in React component

1 Answers1