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

Reactjs – Information mapped from array not showing up on table

Im trying to create a table that will show the information for gpu chips layed out on a table after being mapped from the corresponding array. Im having trouble getting the info to show even though i dont see any errors being thrown in the console. Any help would be greatly appreciated.

const chips = [
        {
          id: 1,
          gpuType: 'V200-32G',
          region: 'North China',
          availableGPUcount:'8',
          GPUram:'32GB',
          CPUmodel:'Intel(R) Xeon(R) CPU E5-2698 v4',
          perGPU:'10core CPU 64G RAM',
          hardDisk:'System disk":" 20GData disk":" 100GB',
          bandwith:'U":"12MB/s D":"12MB/s',
          NAS:'Without',
          Price:1.2
        },
        {
            id: 2,
            gpuType: 'V200-32G',
            region: 'North China',
            availableGPUcount:'3',
            GPUram:'32GB',
            CPUmodel:'Intel(R) Xeon(R) CPU E5-2698 v4',
            perGPU:'10core CPU 64G RAM',
            hardDisk:'System disk":" 20GData disk":" 100GB',
            bandwith:'U":"12MB/s D":"12MB/s',
            NAS:'Without',
            Price:1.2
          },
          {
            id: 3,
            gpuType: 'V200-32G',
            region: 'North China',
            availableGPUcount:'5',
            GPUram:'32GB',
            CPUmodel:'Intel(R) Xeon(R) CPU E5-2698 v4',
            perGPU:'10core CPU 64G RAM',
            hardDisk:'System disk":" 20GData disk":" 100GB',
            bandwith:'U":"12MB/s D":"12MB/s',
            NAS:'Without',
            Price:1.2
          },
          {
            id: 4,
            gpuType: 'A200-32G',
            region: 'Central China',
            availableGPUcount:'8',
            GPUram:'32GB',
            CPUmodel:'Intel(R) Xeon(R) CPU E5-2698 v4',
            perGPU:'10core CPU 64G RAM',
            hardDisk:'System disk":" 20GData disk":" 100GB',
            bandwith:'U":"12MB/s D":"12MB/s',
            NAS:'Without',
            Price:1.2
          },
          {
            id: 5,
            gpuType: 'V100-16G',
            region: 'Central China',
            availableGPUcount:'8',
            GPUram:'32GB',
            CPUmodel:'Intel(R) Xeon(R) CPU E5-2698 v4',
            perGPU:'10core CPU 64G RAM',
            hardDisk:'System disk":" 20GData disk":" 100GB',
            bandwith:'U":"12MB/s D":"12MB/s',
            NAS:'Without',
            Price:1.2
          },
]


return (
    <Main>
        <table className='table'>
            <thead>
            <tr>
                <th>GPUType</th>
                <th>Region</th>
                <th>Available GPU Count</th>
                <th>GPU Ram</th>
                <th>CPU Model</th>
                <th>Per GPU</th>
                <th>hard disk</th>
                <th>Bandwith</th>
                <th>NAS</th>
                <th>Price</th>
            </tr>
            </thead>

         <tbody>
         {chips.map((chip,index) => {
                <tr index={index}>
                    
                    <td>{chip.id}</td>
                    <td>{chip.gpuType}</td>
                    <td>{chip.region}</td>
                    <td>{chip.availableGPUcount}</td>
                    <td>{chip.GPUram}</td>
                    <td>{chip.CPUmodel}</td>
                    <td>{chip.perGPU}</td>
                    <td>{chip.hardDisk}</td>
                    <td>{chip.bandwith}</td>
                    <td>{chip.NAS}</td>
                    <td>{chip.Price}</td>
                </tr>
            })}
         </tbody>


        </table>
    </Main>
  )
}

const Main = styled.div`
    td{
        color:black;
    }
`;

I know styled components arent neccessesary but just wanted to try some things before posting here

I first added thead and tbody since those were the errors shown but still nothing. I also tried using styled components just in case the text was defaulted to white for some reason

Tags:

2

Answers


  1. 0

    You’re missing the return statement in the map

    {chips.map((chip) => {
            return (
               <tr key={chip.id}>                
                <td>{chip.id}</td>
                <td>{chip.gpuType}</td>
                <td>{chip.region}</td>
                <td>{chip.availableGPUcount}</td>
                <td>{chip.GPUram}</td>
                <td>{chip.CPUmodel}</td>
                <td>{chip.perGPU}</td>
                <td>{chip.hardDisk}</td>
                <td>{chip.bandwith}</td>
                <td>{chip.NAS}</td>
                <td>{chip.Price}</td>
               </tr>
            )
        })}

    Or the shorthand

    {chips.map((chip) => (
               <tr key={chip.id}>                
                <td>{chip.id}</td>
                <td>{chip.gpuType}</td>
                <td>{chip.region}</td>
                <td>{chip.availableGPUcount}</td>
                <td>{chip.GPUram}</td>
                <td>{chip.CPUmodel}</td>
                <td>{chip.perGPU}</td>
                <td>{chip.hardDisk}</td>
                <td>{chip.bandwith}</td>
                <td>{chip.NAS}</td>
                <td>{chip.Price}</td>
               </tr>
        ))}

    Additionally the index prop in the tr tag is not a valid one so it won’t be useful and is not required, you need to add the key prop with an unique key, like the chip.id so react is able to detect that every item is different.

    Login or Signup to reply.
  2. 0

    There is an issue in the provided code snippet. In the mapping function used to render the table rows, the arrow function is missing a return statement. To fix this issue, you need to add a return statement before the JSX element in the mapping function. Here’s the corrected code:

    <tbody>
  {chips.map((chip, index) => {
    return (
      <tr key={index}>
        <td>{chip.id}</td>
        <td>{chip.gpuType}</td>
        <td>{chip.region}</td>
        <td>{chip.availableGPUcount}</td>
        <td>{chip.GPUram}</td>
        <td>{chip.CPUmodel}</td>
        <td>{chip.perGPU}</td>
        <td>{chip.hardDisk}</td>
        <td>{chip.bandwith}</td>
        <td>{chip.NAS}</td>
        <td>{chip.Price}</td>
      </tr>
    );
  })}
</tbody>

    Additionally, I’ve added the key attribute to each <tr> element, which is a best practice when rendering a list of elements in React to help with performance optimizations.

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

Back To Top
Search