skip to Main Content

I’m new whit React. I have always the message on the browser that "Each child in a list should have a unique "key" prop".
I’m working with components and Bootstrap.

I tried in different ways to past the API key={values.id} on the card but something is wrong. Can somebody please help me?

import React, { useState, useEffect } from 'react';


function Home() {

    const [fake, setFake] = useState([]);
    console.log(fake);
    useEffect(() => {
        fakestore();
    }, [])

    const fakestore = async () => {
        const response = await
            fetch('https://api.escuelajs.co/api/v1/products');

        const jsonData = await response.json();

        setFake(jsonData);
    }
    return (
        <>

        <div className='container'>
            <div className='row mt-5'>
                {fake.map((values) => {
                    return (
                        <>
                            
                            <div className='col-12 col-md-6 col-lg-4 mt-5'>
                                <div className="card" key={values.id}>
                                    <img src={values.images} className="card-img-top w-100" alt={values.description} />
                                    <div className="card-body">
                                        <h5  className="card-title">{values.title}</h5>
                                        <p className="card-text">{values.description}</p>
                                        <p className="card-text"><strong>€ {values.price.toFixed(2)}</strong></p>
                                        <button className="btn btn-primary">Add to Wishlist </button>
                                    </div>
                                </div>
                            </div>
                            
                        </>
                    )

                })}
            </div>
        </div>
        </>
    );
}

export default Home;

Thanks

Hope to fix the error message on the browser.

2

Answers


  1. They key needs to attach to the highest parent within the map:

    also, you have no need for a fragment here so I’ve removed it

                {fake.map((values) => (
                  <div key={values.id} className='col-12 col-md-6 col-lg-4 mt-5'>
                    <div className='card'>
                      <img src={values.images} className='card-img-top w-100' alt={values.description} />
                      <div className='card-body'>
                        <h5 className='card-title'>{values.title}</h5>
                        <p className='card-text'>{values.description}</p>
                        <p className='card-text'>
                          <strong>€ {values.price.toFixed(2)}</strong>
                        </p>
                        <button className='btn btn-primary'>Add to Wishlist </button>
                      </div>
                    </div>
                  </div>
                ))}
    
    Login or Signup to reply.
  2. As @pacifica94 said above, the "key" prop need to be placed in the outermost wrapper of element/component inside a map(). In other words, it’s a direct element/component inside the map().

    Small notice here, key is a special prop that you can add in any component itself. In case that you want the wrapper is a React fragment (<></>), you also can add key like this:

    <React.Fragment key={...}>
      // code here...
    </React.Fragment>
    

    Hope this help!

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search