Warning: Each child in a list should have a unique “key” prop.

7月 18, 2022next.js

Code that gives an error

    const aaa = todos.map((todo:any, index:any) => {
      return (
        <>
          <li key={todo.id}>
            {todo.description}
          </li>
        </>
      )
    })

Error-free code

    const aaa = todos.map((todo:any, index:any) => {
      return (
        <li key={todo.id}>
          {todo.description}
        </li>
      )
    })

If you remove <> … </>, the error will disappear.

Operating environment

$ sw_vers
ProductName:	macOS
ProductVersion:	11.6.5
BuildVersion:	20G527

$ node -v
v16.13.0

$ npm list -g
├── @aws-amplify/cli@9.1.0
├── npm@8.1.0