Warning: Each child in a list should have a unique "key" prop reactjs

Question

Hi I am unable to fetch the data abjects in the json file please let give suggestion to run this code. Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {current_page, data, first_page_url, from, last_page, last_page_url, next_page_url, path, per_page, prev_page_url, to, total}). If you meant to render a collection of children, use an array instead.

   import React, { useState, useEffect } from 'react';
   import axios from './axios';
   import './App.css';


   function App() {
     const [transactions, setTransactions] = useState([]);

     useEffect(() => {
         const fetchUrl = {};

         async function fetchData(){
          const request = await axios.get(fetchUrl);
          setTransactions(request?.data?.payload);
    
          return request;
        }
        fetchData();
   }, []);

  console.log(transactions);


  return (
    <div className="wrapper">
    <h2>Transactions</h2>
    <p>Current Page {transactions?.current_page}</p>
    <table>
     <tr>
      <th>Id</th>
      <th>Quantity</th>
      <th>datetime</th>
     </tr>
     if ({transactions}) {
      transactions?.data?.map(transaction => (
        <tr>
          <td key={transaction.ID_PAYMENTS}>{transaction.ID_PAYMENTS}</td>
          <td key={transaction.ID_PAYMENTS}>{transaction.CardOnHand}</td>
          <td key={transaction.ID_PAYMENTS}>{transaction.CardSystem}</td>
        </tr>
       ) )
      }        
    </table>
    </div>
   );
  }

  export default App;

JSON Data

        {
"success": "true",
"payload": {
    "current_page": 4,
    "data": [
        {
            "ID_PAYMENTS": "481619",
            "TransQuantity": "37.729999999999997",
            "TransSinglePriceInclSold": "59.5400",
            "TransAmount": "2246.4399",
            "TransArticleID": "3",
            "TransArticleDescription": "Diesel",
            "TransPollDateTime": "2021-03-16 10:49:41.547",
            "CardSystem": "(C) Vehicle Card (1 card)",
            "CardLimit": "990.0000",
            "CardOnHand": "-32351578.0000",
            "Mileage": "138012",
            "TransWasExported": "N",
            "ID_CUSTOMERS": "10",
            "Company": "CHARTERED SPEED LTD",
            "Firstname": null,
            "Lastname": "CHARTERED SPEED LTD",
            "Street": "SARKHEJ BAVLA HIGHWAY",
            "City": "AHMEDABAD, GUJARAT",
            "ZipCode": "382210",
            "ID_VEHICLES": "843",
            "vehicle_desc": "TATA",
            "LicensePlate": "MP09FA9240",
            "ActMilageType": "K",
            "ActMilageDate": "2021-03-16 10:49:41.550",
            "ID_CARDS": "1757",
            "Number": "6247",
            "PAN": "9100339200027624722",
            "Cardholder": null,
            "IsMasterCard": "N",
            "ID_TERMINALS": "19",
            "terminal_desc": "INDORE -3209",
            "StationCode": "3",
            "StationName": "INDORE",
            "Active": "Y",
            "ID_CONTRACTS": "70",
            "contracts_desc": "INDORE ",
            "DateValidFrom": "2018-08-05 00:00:00.000",
            "DateValidTo": "2049-12-31 00:00:00.000",
            "row_num": "31"
        },
        {
            "ID_PAYMENTS": "481618",
            "TransQuantity": "187.80999800000001",
            "TransSinglePriceInclSold": "59.5400",
            "TransAmount": "11182.2100",
            "TransArticleID": "3",
            "TransArticleDescription": "Diesel",
            "TransPollDateTime": "2021-03-16 10:49:41.507",
            "CardSystem": "(C) Vehicle Card (1 card)",
            "CardLimit": "990.0000",
            "CardOnHand": "-32351390.0000",
            "Mileage": "163216",
            "TransWasExported": "N",
            "ID_CUSTOMERS": "10",
            "Company": "CHARTERED SPEED LTD",
            "Firstname": null,
            "Lastname": "CHARTERED SPEED LTD",
            "Street": "SARKHEJ BAVLA HIGHWAY",
            "City": "AHMEDABAD, GUJARAT",
            "ZipCode": "382210",
            "ID_VEHICLES": "1150",
            "vehicle_desc": "SEMI SLEEPER BUS(HPV)",
            "LicensePlate": "MP13P7281",
            "ActMilageType": "K",
            "ActMilageDate": "2021-03-16 10:49:41.517",
            "ID_CARDS": "1325",
            "Number": "6993",
            "PAN": "9100339200027699328",
            "Cardholder": "TRA MP09FA6372 TO MP13P7281",
            "IsMasterCard": "N",
            "ID_TERMINALS": "19",
            "terminal_desc": "INDORE -3209",
            "StationCode": "3",
            "StationName": "INDORE",
            "Active": "Y",
            "ID_CONTRACTS": "70",
            "contracts_desc": "INDORE ",
            "DateValidFrom": "2018-08-05 00:00:00.000",
            "DateValidTo": "2049-12-31 00:00:00.000",
            "row_num": "32"
        },
        {
            "ID_PAYMENTS": "481617",
            "TransQuantity": "2731.3500979999999",
            "TransSinglePriceInclSold": "65.8600",
            "TransAmount": "179886.7031",
            "TransArticleID": "3",
            "TransArticleDescription": "Diesel",
            "TransPollDateTime": "2021-03-16 10:48:50.547",
            "CardSystem": "(C) Vehicle Card (1 card)",
            "CardLimit": "990.0000",
            "CardOnHand": "-32348658.0000",
            "Mileage": null,
            "TransWasExported": "N",
            "ID_CUSTOMERS": "10",
            "Company": "CHARTERED SPEED LTD",
            "Firstname": null,
            "Lastname": "CHARTERED SPEED LTD",
            "Street": "SARKHEJ BAVLA HIGHWAY",
            "City": "AHMEDABAD, GUJARAT",
            "ZipCode": "382210",
            "ID_VEHICLES": null,
            "vehicle_desc": null,
            "LicensePlate": null,
            "ActMilageType": null,
            "ActMilageDate": null,
            "ID_CARDS": "1997",
            "Number": "2275",
            "PAN": "000000000011227564=",
            "Cardholder": "sand to indore",
            "IsMasterCard": "N",
            "ID_TERMINALS": "13",
            "terminal_desc": "INDORE-8587",
            "StationCode": "3",
            "StationName": "INDORE",
            "Active": "Y",
            "ID_CONTRACTS": "70",
            "contracts_desc": "INDORE ",
            "DateValidFrom": "2018-08-05 00:00:00.000",
            "DateValidTo": "2049-12-31 00:00:00.000",
            "row_num": "33"
        },
        {
            "ID_PAYMENTS": "481616",
            "TransQuantity": "210.270004",
            "TransSinglePriceInclSold": "59.5400",
            "TransAmount": "12519.4805",
            "TransArticleID": "3",
            "TransArticleDescription": "Diesel",
            "TransPollDateTime": "2021-03-16 10:34:44.900",
            "CardSystem": "(C) Vehicle Card (1 card)",
            "CardLimit": "990.0000",
            "CardOnHand": "-32348448.0000",
            "Mileage": "346718",
            "TransWasExported": "N",
            "ID_CUSTOMERS": "10",
            "Company": "CHARTERED SPEED LTD",
            "Firstname": null,
            "Lastname": "CHARTERED SPEED LTD",
            "Street": "SARKHEJ BAVLA HIGHWAY",
            "City": "AHMEDABAD, GUJARAT",
            "ZipCode": "382210",
            "ID_VEHICLES": "771",
            "vehicle_desc": "LP0 1515",
            "LicensePlate": "MP09FA9071",
            "ActMilageType": "K",
            "ActMilageDate": "2021-03-16 10:34:44.903",
            "ID_CARDS": "1569",
            "Number": "6325",
            "PAN": "9100339200027632527",
            "Cardholder": null,
            "IsMasterCard": "N",
            "ID_TERMINALS": "19",
            "terminal_desc": "INDORE -3209",
            "StationCode": "3",
            "StationName": "INDORE",
            "Active": "Y",
            "ID_CONTRACTS": "70",
            "contracts_desc": "INDORE ",
            "DateValidFrom": "2018-08-05 00:00:00.000",
            "DateValidTo": "2049-12-31 00:00:00.000",
            "row_num": "34"
        },
        {
            "ID_PAYMENTS": "481615",
            "TransQuantity": "75.300003000000004",
            "TransSinglePriceInclSold": "59.5400",
            "TransAmount": "4483.3599",
            "TransArticleID": "3",
            "TransArticleDescription": "Diesel",
            "TransPollDateTime": "2021-03-16 10:26:17.830",
            "CardSystem": "(C) Vehicle Card (1 card)",
            "CardLimit": "990.0000",
            "CardOnHand": "-32348372.0000",
            "Mileage": "391441",
            "TransWasExported": "N",
            "ID_CUSTOMERS": "10",
            "Company": "CHARTERED SPEED LTD",
            "Firstname": null,
            "Lastname": "CHARTERED SPEED LTD",
            "Street": "SARKHEJ BAVLA HIGHWAY",
            "City": "AHMEDABAD, GUJARAT",
            "ZipCode": "382210",
            "ID_VEHICLES": "1026",
            "vehicle_desc": "VOLVO",
            "LicensePlate": "MP04PA7245",
            "ActMilageType": "K",
            "ActMilageDate": "2021-03-16 12:42:41.030",
            "ID_CARDS": "1710",
            "Number": "7264",
            "PAN": "9100339200027726428",
            "Cardholder": null,
            "IsMasterCard": "N",
            "ID_TERMINALS": "20",
            "terminal_desc": "INDORE - 5652",
            "StationCode": "3",
            "StationName": "INDORE",
            "Active": "Y",
            "ID_CONTRACTS": "70",
            "contracts_desc": "INDORE ",
            "DateValidFrom": "2018-08-05 00:00:00.000",
            "DateValidTo": "2049-12-31 00:00:00.000",
            "row_num": "35"
        },
        {
            "ID_PAYMENTS": "481614",
            "TransQuantity": "208.11000100000001",
            "TransSinglePriceInclSold": "59.5400",
            "TransAmount": "12390.8701",
            "TransArticleID": "3",
            "TransArticleDescription": "Diesel",
            "TransPollDateTime": "2021-03-16 10:26:17.797",
            "CardSystem": "(C) Vehicle Card (1 card)",
            "CardLimit": "990.0000",
            "CardOnHand": "-32348164.0000",
            "Mileage": "2034680",
            "TransWasExported": "N",
            "ID_CUSTOMERS": "10",
            "Company": "CHARTERED SPEED LTD",
            "Firstname": null,
            "Lastname": "CHARTERED SPEED LTD",
            "Street": "SARKHEJ BAVLA HIGHWAY",
            "City": "AHMEDABAD, GUJARAT",
            "ZipCode": "382210",
            "ID_VEHICLES": null,
            "vehicle_desc": null,
            "LicensePlate": null,
            "ActMilageType": null,
            "ActMilageDate": null,
            "ID_CARDS": "1989",
            "Number": "15",
            "PAN": "000000000011235641=",
            "Cardholder": null,
            "IsMasterCard": "N",
            "ID_TERMINALS": "20",
            "terminal_desc": "INDORE - 5652",
            "StationCode": "3",
            "StationName": "INDORE",
            "Active": "Y",
            "ID_CONTRACTS": "70",
            "contracts_desc": "INDORE ",
            "DateValidFrom": "2018-08-05 00:00:00.000",
            "DateValidTo": "2049-12-31 00:00:00.000",
            "row_num": "36"
        },
        {
            "ID_PAYMENTS": "481613",
            "TransQuantity": "31.100000000000001",
            "TransSinglePriceInclSold": "59.5400",
            "TransAmount": "1851.6899",
            "TransArticleID": "3",
            "TransArticleDescription": "Diesel",
            "TransPollDateTime": "2021-03-16 10:19:05.530",
            "CardSystem": "(C) Vehicle Card (1 card)",
            "CardLimit": "990.0000",
            "CardOnHand": "-32348132.0000",
            "Mileage": "222630",
            "TransWasExported": "N",
            "ID_CUSTOMERS": "10",
            "Company": "CHARTERED SPEED LTD",
            "Firstname": null,
            "Lastname": "CHARTERED SPEED LTD",
            "Street": "SARKHEJ BAVLA HIGHWAY",
            "City": "AHMEDABAD, GUJARAT",
            "ZipCode": "382210",
            "ID_VEHICLES": "801",
            "vehicle_desc": "TATA",
            "LicensePlate": "MP09FA9193",
            "ActMilageType": "K",
            "ActMilageDate": "2021-03-16 10:19:05.537",
            "ID_CARDS": "1590",
            "Number": "6346",
            "PAN": "9100339200027634622",
            "Cardholder": null,
            "IsMasterCard": "N",
            "ID_TERMINALS": "19",
            "terminal_desc": "INDORE -3209",
            "StationCode": "3",
            "StationName": "INDORE",
            "Active": "Y",
            "ID_CONTRACTS": "70",
            "contracts_desc": "INDORE ",
            "DateValidFrom": "2018-08-05 00:00:00.000",
            "DateValidTo": "2049-12-31 00:00:00.000",
            "row_num": "37"
        },
        {
            "ID_PAYMENTS": "481612",
            "TransQuantity": "262.040009",
            "TransSinglePriceInclSold": "59.5400",
            "TransAmount": "15601.8604",
            "TransArticleID": "3",
            "TransArticleDescription": "Diesel",
            "TransPollDateTime": "2021-03-16 10:19:05.500",
            "CardSystem": "(C) Vehicle Card (1 card)",
            "CardLimit": "990.0000",
            "CardOnHand": "-32347870.0000",
            "Mileage": "177760",
            "TransWasExported": "N",
            "ID_CUSTOMERS": "10",
            "Company": "CHARTERED SPEED LTD",
            "Firstname": null,
            "Lastname": "CHARTERED SPEED LTD",
            "Street": "SARKHEJ BAVLA HIGHWAY",
            "City": "AHMEDABAD, GUJARAT",
            "ZipCode": "382210",
            "ID_VEHICLES": "1142",
            "vehicle_desc": "SEMI SLEEPER BUS(HPV)",
            "LicensePlate": "MP13P5481",
            "ActMilageType": "K",
            "ActMilageDate": "2021-03-16 10:19:05.507",
            "ID_CARDS": "791",
            "Number": "6750",
            "PAN": "9100339200027675021",
            "Cardholder": null,
            "IsMasterCard": "N",
            "ID_TERMINALS": "19",
            "terminal_desc": "INDORE -3209",
            "StationCode": "3",
            "StationName": "INDORE",
            "Active": "Y",
            "ID_CONTRACTS": "70",
            "contracts_desc": "INDORE ",
            "DateValidFrom": "2018-08-05 00:00:00.000",
            "DateValidTo": "2049-12-31 00:00:00.000",
            "row_num": "38"
        },
        {
            "ID_PAYMENTS": "481611",
            "TransQuantity": "37.959999000000003",
            "TransSinglePriceInclSold": "59.5400",
            "TransAmount": "2260.1399",
            "TransArticleID": "3",
            "TransArticleDescription": "Diesel",
            "TransPollDateTime": "2021-03-16 10:11:25.840",
            "CardSystem": "(C) Vehicle Card (1 card)",
            "CardLimit": "990.0000",
            "CardOnHand": "-32347832.0000",
            "Mileage": "2034680",
            "TransWasExported": "N",
            "ID_CUSTOMERS": "10",
            "Company": "CHARTERED SPEED LTD",
            "Firstname": null,
            "Lastname": "CHARTERED SPEED LTD",
            "Street": "SARKHEJ BAVLA HIGHWAY",
            "City": "AHMEDABAD, GUJARAT",
            "ZipCode": "382210",
            "ID_VEHICLES": "763",
            "vehicle_desc": "VALVO",
            "LicensePlate": "MP04PA2763",
            "ActMilageType": "K",
            "ActMilageDate": "2021-03-16 10:11:25.847",
            "ID_CARDS": "1564",
            "Number": "6320",
            "PAN": "9100339200027632022",
            "Cardholder": null,
            "IsMasterCard": "N",
            "ID_TERMINALS": "20",
            "terminal_desc": "INDORE - 5652",
            "StationCode": "3",
            "StationName": "INDORE",
            "Active": "Y",
            "ID_CONTRACTS": "70",
            "contracts_desc": "INDORE ",
            "DateValidFrom": "2018-08-05 00:00:00.000",
            "DateValidTo": "2049-12-31 00:00:00.000",
            "row_num": "39"
        },
        {
            "ID_PAYMENTS": "481610",
            "TransQuantity": "207.63000500000001",
            "TransSinglePriceInclSold": "59.5400",
            "TransAmount": "12362.2900",
            "TransArticleID": "3",
            "TransArticleDescription": "Diesel",
            "TransPollDateTime": "2021-03-16 10:11:25.820",
            "CardSystem": "(C) Vehicle Card (1 card)",
            "CardLimit": "990.0000",
            "CardOnHand": "-32347624.0000",
            "Mileage": "384249",
            "TransWasExported": "N",
            "ID_CUSTOMERS": "10",
            "Company": "CHARTERED SPEED LTD",
            "Firstname": null,
            "Lastname": "CHARTERED SPEED LTD",
            "Street": "SARKHEJ BAVLA HIGHWAY",
            "City": "AHMEDABAD, GUJARAT",
            "ZipCode": "382210",
            "ID_VEHICLES": "1075",
            "vehicle_desc": "TATA",
            "LicensePlate": "MP09FA9052",
            "ActMilageType": "K",
            "ActMilageDate": "2021-03-16 10:11:25.833",
            "ID_CARDS": "1605",
            "Number": "6361",
            "PAN": "9100339200027636122",
            "Cardholder": null,
            "IsMasterCard": "N",
            "ID_TERMINALS": "20",
            "terminal_desc": "INDORE - 5652",
            "StationCode": "3",
            "StationName": "INDORE",
            "Active": "Y",
            "ID_CONTRACTS": "70",
            "contracts_desc": "INDORE ",
            "DateValidFrom": "2018-08-05 00:00:00.000",
            "DateValidTo": "2049-12-31 00:00:00.000",
            "row_num": "40"
        }
    ],
    "first_page_url": "http://csplfms.ddns.net:8081/hecpoll-api/public/api/transactions?page=1",
    "from": 31,
    "last_page": 7380,
    "last_page_url": "http://csplfms.ddns.net:8081/hecpoll-api/public/api/transactions?page=7380",
    "next_page_url": "http://csplfms.ddns.net:8081/hecpoll-api/public/api/transactions?page=5",
    "path": "http://csplfms.ddns.net:8081/hecpoll-api/public/api/transactions",
    "per_page": 10,
    "prev_page_url": "http://csplfms.ddns.net:8081/hecpoll-api/public/api/transactions?page=3",
    "to": 40,
    "total": 73796
  }
}

I'm going to vote to close as a duplicate but the problem is `if ({transactions})`. You need all Javascript code like `if` to be inside curly braces. But I think since you are using optional chaining you don't need the `if` at all? Try `{transactions?.data?.map(transaction => (...))}`. — Linda Paiste, Mar 16 '21 at 09:07

Linda Paiste · Answer 1 · 2021-03-16T09:27:47.713

When you map over an array and return elements you need to set a key on the outermost element. So the three td lines don't actually need a key. The tr around them does need a key and it doesn't have one.

The "Objects are not valid as a React child" error is due to a syntax error in if ({transactions}) { You need all Javascript code including that if to be inside curly braces. But since you are using optional chaining you don't need the if at all.

Though not required, there are some improvements that you can make to your table HTML syntax. You can add thead and tbody tags around the head and body. You can add scope="col" to your th elements in the header row. You could use the ID column as the row header with <th scope="row"> if you want to.

return (
  <div className="wrapper">
    <h2>Transactions</h2>
    <p>Current Page {transactions?.current_page}</p>
    <table>
      <thead>
        <tr>
          <th scope="col">Id</th>
          <th scope="col">Quantity</th>
          <th scope="col">datetime</th>
        </tr>
      </thead>
      <tbody>
        {transactions?.data?.map((transaction) => (
          <tr key={transaction.ID_PAYMENTS}>
            <th scope="row">{transaction.ID_PAYMENTS}</th>
            <td>{transaction.CardOnHand}</td>
            <td>{transaction.CardSystem}</td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

score 0 · Answer 2 · answered Mar 16 '21 at 09:08

If you want to render something, you have to enclose it in {}
~~You're not returning anything from your map function~~
Closing tags don't have spaces before /
You are checking if transactions exist, but still use optional chaining for no reason. If is not valid in return at all.
JSX arrays have to have a key property

import React, { useState, useEffect } from 'react';
import axios from './axios';
import './App.css';


function App() {
    const [transactions, setTransactions] = useState([]);

    useEffect(() => {
        const fetchUrl = {};

        async function fetchData() {
            const request = await axios.get(fetchUrl);
            setTransactions(request?.data?.payload);

            return request;
        }
        fetchData();
    }, []);

    return (
        <div className="wrapper" >
            <h2>Transactions </h2>
            <p> Current Page {transactions?.current_page} </p>
            <table>
                <tr>
                    <th>Id </th>
                    <th> Quantity </th>
                    <th> datetime </th>
                </tr>
                {transactions?.data?.map((transaction, index) => (
                    (<tr key={index}>
                        <td key={transaction.ID_PAYMENTS} > {transaction.ID_PAYMENTS} </td>
                        < td key={transaction.ID_PAYMENTS} > {transaction.CardOnHand} </td>
                        < td key={transaction.ID_PAYMENTS} > {transaction.CardSystem} </td>
                    </tr>)
                ))}
            </table>
        </div>
    );
}

export default App;

I think `key` is not required for `` tags but more to `` tag, and `key={transaction.ID_PAYMENTS}` should have been put there — Hadi KAR, Mar 16 '21 at 09:15

score 0 · Answer 3 · answered Mar 16 '21 at 09:08

You cannot use if clause in your return.
In map function, each component returned should have a unique key.

{ transactions?.data?.length && transactions.data.map(transaction => <tr>
      <td key={transaction.ID_PAYMENTS}>{transaction.ID_PAYMENTS}</td>
      <td key={transaction.ID_PAYMENTS}>{transaction.CardOnHand}</td>
      <td key={transaction.ID_PAYMENTS}>{transaction.CardSystem}</td>
    </tr>
}

Warning: Each child in a list should have a unique "key" prop reactjs

3 Answers3