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

>Solution :

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.