Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Having two .map functions in React component and the second one gives the error 'Each child in a list should have a unique "key" prop.'

I’m getting an error that each child in a list should have a unique "key" prop.

The error only appears on the second .map function.

import React from 'react'
import { Table } from 'react-bootstrap'

const ActivityTable = () => {

  const activities = [{ id: 100, name: 'reading' }, { id: 101, name: 'coding' }, { id: 200, name: 'eating' },]

  const date = new Date();
  const currentDay = date.getDate();
  const currentMonth = date.getMonth() + 1;
  const currentYear = date.getFullYear();

  const getAllDaysInMonth = (month, year) =>
    Array.from(
      { length: new Date(year, month, 0).getDate() }, // get next month, zeroth's (previous) day
      (_, i) => new Date(year, month - 1, i + 1)    // get current month (0 based index)
    );

  const allDatesInMonth = getAllDaysInMonth(currentMonth, currentYear)

  const listOfCurrentDays = allDatesInMonth.map(x => x.toLocaleDateString([], { day: "numeric" }))

  //console.log(allDatesInMonth.map(x => x.toLocaleDateString([], { month: "short", day: "numeric" })))

  if (currentDay >= 0 || currentDay < 8) {
    var listOfCurrentWeekDays = listOfCurrentDays.slice(0, 7)
  } else if (currentDay > 7 || currentDay < 15) {
    var listOfCurrentWeekDays = listOfCurrentDays.slice(7, 14)
  } else if (currentDay > 14 || currentDay < 22) {
    var listOfCurrentWeekDays = listOfCurrentDays.slice(14, 21)
  } else if (currentDay > 21) {
    var listOfCurrentWeekDays = listOfCurrentDays.slice(20, 31)
  }

  console.log(listOfCurrentWeekDays)

  return (
    <Table striped>
      <thead>
        <tr>
          <th>#</th>
          {
            (listOfCurrentWeekDays).map(function (item, key) {
              return (
                <th key={key}>
                  {item}
                </th>
              )
            })
          }
        </tr>
      </thead>
      <tbody>
        {
          (activities).map(function (item, key) {
            return (
              <tr>
                <th key={item.id}>
                  {item.name}
                </th>
              </tr>
            )
          })
        }
      </tbody>
    </Table>
  )
}
export default ActivityTable

At first, I was using key={key} for both .map functions.

I thought as both key values start with 0,1,2… that that was the reason why I was getting this error.

I have added the id property to the activities array so that both .map functions have different keys.

But I’m still getting this error.

Tags:

4

Answers


  1. 0

    The problem is that you are using key in the th; however, you are expected to add it to tr, since it is the highest tag in the list item.

    Login or Signup to reply.
  2. 0

    In your second .map example, you’re applying the key to a nested component, not the root — as with the first example, you’re applying the key to the root of the mapped component. It should be noted that the key is only relevant within the parent component. Applying the key to the root tr tag of the mapped component should do the trick.

    Login or Signup to reply.
  3. 0

    You are getting this error because you are giving the key property to the <th> tag instead of <tr> tag.

    You should give key property to the parent.

    In order to solve this problem, use the code below:

    {
      (activities).map(function (item, key) {
        return (
          <tr key={item.id}>
            <th>
              {item.name}
            </th>
          </tr>
        )
      })
    }
    Login or Signup to reply.
  4. 0

    You just put the key in the wrong place.

            {
            activities.map(function (item, key) {
                return (
                    <tr key={item.id}>
                        <th>
                            {item.name}
                        </th>
                    </tr>
                )
            })
        }

    It needs to be on the parent element.

    Side note: Try to avoid using var, stick with let and const.

    let listOfCurrentWeekDays

if (currentDay >= 0 || currentDay < 8) {
     listOfCurrentWeekDays = listOfCurrentDays.slice(0, 7)
} else if (currentDay > 7 || currentDay < 15) {
     listOfCurrentWeekDays = listOfCurrentDays.slice(7, 14)
} else if (currentDay > 14 || currentDay < 22) {
     listOfCurrentWeekDays = listOfCurrentDays.slice(14, 21)
} else if (currentDay > 21) {
     listOfCurrentWeekDays = listOfCurrentDays.slice(20, 31)
}

    I hope it will help you. 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search