Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Warning: Each child in a list should have a unique "key" prop in table

I use the key in <tr key={i}> currently but this warning appears in the console

 <table className="table table-responsive table-striped table-bordered">
     <thead className="text-center">
         <tr>
             <th>شرح خطا</th>
             <th>تاریخ / زمان</th>
             <th>عنوان خطا</th>
             <th>شناسه</th>
         </tr>
     </thead>
     <tbody>
         {
             logs && logs.map((_item, i) => {
                 return <>
                     <tr key={i}>
                         <td  className="text-end">{_item.exception}</td>
                         <td  className="text-center" >{new Date(_item.timeStamp).toLocaleDateString('fa-IR')} {new Date(_item.timeStamp).toLocaleTimeString('fa-IR')}</td>
                         <td  className="text-end">{_item.message}</td>
                         <td  className="text-end">{_item.id}</td>
                     </tr>
                 </>
             })
         }
     </tbody>
 </table>

What is the problem?

How can I fix this?

Tags:

2

Answers


  1. 0

    Use parenthesis for wrapping return statement code, e.g:

    <tbody>
  {logs &&
    logs.map((_item, i) => {
      return (
        <>
          <tr key={i}>
            <td className="text-end">{_item.exception}</td>
            <td className="text-center">
              {new Date(_item.timeStamp).toLocaleDateString("fa-IR")}{" "}
              {new Date(_item.timeStamp).toLocaleTimeString("fa-IR")}
            </td>
            <td className="text-end">{_item.message}</td>
            <td className="text-end">{_item.id}</td>
          </tr>
        </>
      );
    })}
</tbody>
    Login or Signup to reply.
  2. 0

    It’s because <></> is actually the top level React component. <> is just a syntactic sugar for <Fragment />. In your case, removing <></> should fix it.

    Do this instead.

    logs && logs.map((_item, i) => {
             return (
                 <tr key={i}>
                     <td  className="text-end">{_item.exception}</td>
                     <td  className="text-center" >{new Date(_item.timeStamp).toLocaleDateString('fa-IR')} {new Date(_item.timeStamp).toLocaleTimeString('fa-IR')}</td>
                     <td  className="text-end">{_item.message}</td>
                     <td  className="text-end">{_item.id}</td>
                 </tr>
             )
         })
     }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search