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

ReactJS Returning props.value.map is not a function when parsing a json file

I am trying to teach myself ReactJS using PrimeReact. i am making a simple application to track crypto holdings in a wallet i own. i have this code to create a table with base data from a json file:

import React, { useState, useEffect } from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import jsonData from './EVM.json'; // Assuming EVM.json is inside the src directory

const TokenTable = ({ data }) => {
  console.log('Data:', data);
  const header = (
    <div>
      List of Tokens
    </div>
  );

  return (
    <div>
      <DataTable value={data} header={header}>
        <Column field="WalletTokenIcon" header="Token Icon"></Column>
        <Column field="TokenName" header="Token Name"></Column>
        <Column field="TokenQTY" header="Token Quantity"></Column>
        <Column field="TokenPrice" header="Token Price"></Column>
        <Column field="TokenValue" header="Token Value"></Column>
        <Column field="TokenPercentIncrease" header="Token Percent Increase"></Column>
      </DataTable>
    </div>
  );
};

const TokenTableContainer = () => {
  const [tokenData, setTokenData] = useState([]);

  useEffect(() => {
    setTokenData(jsonData); // Use jsonData directly
  }, []);

  return <TokenTable data={tokenData} />;
};

export default TokenTableContainer;

there is a view i am developing, and when you click on a button in that view it calls this function. however, it is throwing this error:

enter image description here

i have confirmed using the Chrome Console that it is pulling the data. this is a sample of test data, so no identifying information here:

enter image description here

and just for reference here is a sample of the json data structure:

{
    "WalletTokenIcon":"Img\Icons\Evm\eth.png",
    "TokenName":"ETHEREUM MAINNET",
    "TokenQTY":"0.000000000000000000 ETH",
    "TokenPrice":"$0.00",
    "TokenValue":"$0.00",
    "TokenPercentIncrease":"0%"
}

Any ideas as to why it it throwing that error. it is returning valid json data but i can’t seem to understand why it is having an issue with putting it into the table.

Tags:

2

Answers


  1. 0

    In this case, when you print data, the console displays the value as an object. The DataTable component appears to be attempting to iterate through the provided value but the value is set to an object, and thus doesn’t have the map property.

    From the docs, DataTable requires an array for value, not an object. https://primereact.org/datatable/#api.DataTable.props.value)

    To fix this, pass the TokenData array to the value property instead of the data object.

    <DataTable value={data.TokenData} header={header}>
    Login or Signup to reply.
  2. 0

    I think the issue is that jsonData is not an array, and that is why it does not recognize the map() method. From what I can see in your console screenshot, jsonData is an object that contains one element:

    {
  TokenData: [...]
}

    The attribute TokenData is what I suppose you want to pass TokenTable, so you should use jsonData.TokenData. Since it is an array, the map() method should be recognized.

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

Back To Top
Search