How to give shimmer card's child in a list a unique "key" prop?

Question

Tried to made a dummy id array inside another file and tried to imported here but still same error. Here is my code

  return (
    <div className="restraunt-list" >
      {Array(15)
        .fill("")
        .map((e) => (
          <div className="shimmer-card"> </div>
        ))}
    </div>
  );
};
export default Shimmer;

Error I am getting

index.js:1 Warning: Each child in a list should have a unique "key" prop.
Check the render method of `Shimmer`. See https://reactjs.org/link/warning-keys for more information.

    at div
    at Shimmer
    at Body 
    at AppLayout

Welcome on StackOverflow. Can you show the error you are getting? — Elikill58, May 15 '23 at 13:48
https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key — Andy, May 15 '23 at 13:53
Does this answer your question? [Understanding unique keys for array children in React.js](https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js) — Elikill58, May 15 '23 at 20:49

score 0 · Answer 1 · answered May 26 '23 at 00:32

0

Solution to my question :

const Shimmer = () => {
  return (
    <div className="restraunt-list">
      {Array(20)
        .fill("")
        .map((e, index) => (
          <div key={index} className="shimmer-card">
            <img className="shimmer-image" />
            <p className="shimmer-card-heading"></p>
            <p className="shimmer-card-restaurant-name"></p>
          </div>
        ))}
    </div>
  );
};

answered May 26 '23 at 00:32

Puru Rana

1
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 26 '23 at 04:29

How to give shimmer card's child in a list a unique "key" prop?

1 Answers1