How do I get the number of each object in a array using .map | React

Question

im trying to get the number of each object in a array, then im trying to add it to my jsx code to display what one it is

I'm pulling the data from this file tableData.js

export const data = [
  {price: 1500, isSold: false}
  {price: 1800, isSold: false}
  {price: 1650, isSold: true}
]

Table.js

import React from "react";

import {data} from "./tableData.js";

function Table() {
  return (
    <table>
      <thead>
        <tr>
          <td>Number</td>
          <td>Status</td>
        </tr>
      </thead>
      <tbody>
        {data.map((data, key) => {
          return (
            <tr>
              <td>{/* I NEED TO ADD THE NUMBER HERE */}</td>
              <td>{data.isSold ? "Sold" : "Available"}</td>
            </tr>
          )
        }
      </tbody>
    </table>
  )
}

Ive tried adding making a variable that starts at 0 and adds 1 each time it adds a row but it doesnt work (im a beginner so my strategy probably sucks)

import React from "react";

import {data} from "./tableData.js";

function Table() {
  const currentNumber = 0; // Added this

  return (
    <table>
      <thead>
        <tr>
          <td>Number</td>
          <td>Status</td>
        </tr>
      </thead>
      <tbody>
        {data.map((data, key) => {
          const setNumber = currentNumber + 1; // Added this

          return (
            <tr>
              <td>{currentNumber}</td> // Added this
              <td>{data.isSold ? "Sold" : "Available"}</td>
            </tr>
          )
        }
      </tbody>
    </table>
  )
}

How about `{key}`? Or `{key + 1}` if you don't want it to start from 0. — Nicholas Tower, Feb 01 '23 at 21:19

score 1 · Accepted Answer · answered Feb 01 '23 at 21:23

You can get the current index of the item of your array by using the second parameter of the map function:

<tbody>
    {data.map((data, key) => {
      return (
        <tr key={key}> {/* <= Prevent the error: Each child need its own key */}
          <td>{key}</td>
          <td>{data.isSold ? "Sold" : "Available"}</td>
        </tr>
      )
    }
  </tbody>

You can learn more about the map function here: JS Map (MDN)

and there's a link about why you should use the key prop: Understanding the key prop

score 1 · Answer 2 · answered Feb 02 '23 at 11:39

Just a Tip, It might have fixed your problem but it is a better approach to keep a separate id in each object to identify them rather than using function generated Indexes or Keys.

Bcz These keys are generated by Js for that particular instance of array not for your data.

Suppose you remove something from the mapped list so your new index will be oldIndex-1 but in your data set it will be oldIndex. So it will create extra confusion and will lead to data corruption.

Just add a Id in your data arr -


export const data = [
  {id:001, price: 1500, isSold: false}
  {id:101, price: 1800, isSold: false}
  {id:203, price: 1650, isSold: true}
]

Now use them as


<tbody>
    {data.map((data, key) => {
      return (
        <tr key={key}> {/* <= Prevent the error: Each child need its own key */}
          <td>{data.id}</td>
          <td>{data.isSold ? "Sold" : "Available"}</td>
        </tr>
      )
    }
  </tbody>

Now even if you change the order, your data price will always refer to that specific data-id.

score 0 · Answer 3 · answered Feb 01 '23 at 21:23

The second argument of the map is the actual index.

const data = [
  { price: 1500, isSold: false},
  { price: 1800, isSold: false},
  { price: 1650, isSold: true}
]

console.log(data.map((item, i) => 
`Num: ${i}, Price: ${item.price}, Sold: ${item.isSold}`))

score 0 · Answer 4 · answered Feb 01 '23 at 21:24

0

I fixed it adding this to it

<td>{key + 1}</td>

answered Feb 01 '23 at 21:24

Martin Arreola

25
4

How do I get the number of each object in a array using .map | React

4 Answers4