https://github.com/ebazhanov/fix-key-prop-error

Project demonstrates how to fix console error: `index.js:1 Warning: Each child in a list should have a unique "key" prop.`
https://github.com/ebazhanov/fix-key-prop-error

education educational-project hooks react

Last synced: 16 days ago
JSON representation

Project demonstrates how to fix console error: `index.js:1 Warning: Each child in a list should have a unique "key" prop.`

• Host: GitHub
• URL: https://github.com/ebazhanov/fix-key-prop-error
• Owner: Ebazhanov
• Created: 2020-06-06T17:20:34.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-06-07T10:05:02.000Z (over 4 years ago)
• Last Synced: 2025-01-22T14:54:32.947Z (20 days ago)
• Topics: education, educational-project, hooks, react
• Language: JavaScript
• Homepage: https://fix-key-prop-error.netlify.app/
• Size: 217 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### This project demonstrates how to fix the error: Each child in a list should have a unique "key" prop.

```markdown

index.js:1 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `App`. See https://fb.me/react-warning-keys for more information.

    in li (at App.js:8)

    in App (at src/index.js:9)

    in StrictMode (at src/index.js:8)

```

> 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:

#### **Variant #1** Add `key={num}` the best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:

```javascript



    {numbers.map((num) => (

        
{num}
    

    ))}



```

#### **Variant #2** Add `index` when you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort:

```javascript



    {numbers.map((num, index) => (

        
{num}
    

    ))}



```


### Usage: 

- `yarn start`

- demo [https://fix-key-prop-error.netlify.app/](https://fix-key-prop-error.netlify.app/)

### Reference link:

- [react docs lists-and-keys](https://reactjs.org/docs/lists-and-keys.html#keys)

- [https://kentcdodds.com/blog/understanding-reacts-key-prop](https://kentcdodds.com/blog/understanding-reacts-key-prop)