1

I'm getting a warning to use a "key" prop but am using the key prop in my CatList component. See below:

import React from 'react';
import PropTypes from 'prop-types';
import {Link} from 'react-router-dom';

const CatList = ({cats}) => {
  return (
      <ul className="list-group">
        {cats.map(cat =>
           <li className="list-group-item" key={cat.id}>
            <Link to={'/cats/' + cat.id}>{cat.name}</Link>
           </li>
        )}
      </ul>
  );
};

CatList.propTypes = {
  cats: PropTypes.array.isRequired
};

export default CatList;

Any idea why I am still getting this React warning?

halfer
  • 19,824
  • 17
  • 99
  • 186
AnApprentice
  • 108,152
  • 195
  • 629
  • 1,012
  • 9
    Any chance you have the same `cat.id` multiple times in your `cats` Array? Try to `console.log` the value and see what you have there – Dekel May 27 '17 at 00:26
  • Possible duplicate of [Understanding unique keys for array children in React.js](https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js) – mleko May 27 '17 at 05:51

0 Answers0