0
const Experts = () => {
    const experts = [{
            img: image1,
            category: 'Dentist',
            name: 'Dr. Robartis',
            expertize: 'DMD,FACE'
        },
        {

            img: image2,
            category: 'Dentist',
            name: ' Dr. Linda Davis',
            expertize: 'CDT'
        },
        {

            img: image3,
            category: 'Dentist',
            name: 'Zakaria Smith',
            expertize: 'FACDS,DDS'
        },
        {

            img: image4,
            category: 'Dentist',
            name: 'Maria',
            expertize: 'FADG,DMD'
        }
    ]
    return (
        <div className="container" id="experts">

            <h2 className="mb-5">Award Winning Dentists</h2>
            <div className="row">
                {
                    experts.map(expert => <Expert expert={expert}></Expert>)
                }
            </div>
        </div>
    );
};

export default Experts;

error

Asif vora
  • 3,163
  • 3
  • 15
  • 31
Sheikh Protik
  • 9
  • 1
  • `` ------> ``. Also note that this is not an error; it is a warning. – Yousaf Oct 21 '21 at 11:32
  • You need to pass a unique id. https://reactjs.org/docs/lists-and-keys.html#keys – Asif vora Oct 21 '21 at 12:19
  • Does this answer your question? [Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of \`ListView\`](https://stackoverflow.com/questions/34576332/warning-each-child-in-an-array-or-iterator-should-have-a-unique-key-prop-che) – jsonderulo Oct 22 '21 at 07:10

3 Answers3

0
 <div className="row">
        {experts.map((expert,index) => <Expert key={index} expert={expert}</Expert>)}
 </div>

this should help

David Odinaka Enyoghasim
  • 192
  • 1
  • 12
0

Just as the error states, this generated list of elements should contain a key property in each element:

experts.map(expert => <Expert expert={expert}></Expert>)

If the expert value had some identifier, such as an id property, then you can use that:

experts.map(expert => <Expert key={expert.id} expert={expert}></Expert>)

Otherwise, you can always rely on the index value supplied as the second argument to the map callback:

experts.map((expert, i) => <Expert key={i} expert={expert}></Expert>)
David
  • 208,112
  • 36
  • 198
  • 279
0

When you're looping over an Array, you should pass a unique identifier as a key prop to each child, so that React finds and recognizes which child has changed, removed, or added. From ReactJs docs:

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.

So in your case, you should pass a key to the <Expert> component.

For choosing an identifier, many developers use the index of the element in Array and pass it as key prop. In your case, it would be like the below code:

<div className="row">
  {
    experts.map((expert, index) => <Expert key={index} expert={expert}></Expert>)
  }
</div>

This approach (using index as a prop) is the easiest and the most feasible approach, but it's not the best approach always! Based on the ReactJs docs:

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.

The main reason is that if you use index as a key prop for a child component, reordering your experts list (by deleting an expert for example) will change the index for the remaining items in the experts list. In this case, the component state can get mixed up and may use the old key for a different child component. So basically it is recommended to avoid using index as a key prop.

If your experts list has a unique property (it can be id or any other unique property) for each item, you can use the following code:

<div className="row">
  {
    experts.map((expert) => <Expert key={expert.id} expert={expert}></Expert>)
  }
</div>

There are also some exceptions where you can safely use index as a key prop, as listed here:

What are some exceptions where it is safe to use index as key?

  1. If your list is static and will not change.
  2. The list will never be re-ordered.
  3. The list will not be filtered (adding/removing items from the list).
  4. There are no ids for the items in the list.
fsefidabi
  • 153
  • 1
  • 12