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 <td>{key}</td>? Or <td>{key + 1}</td> if you don't want it to start from 0. — Nicholas Tower
– Nicholas Tower, Commented Feb 1, 2023 at 21:19

Ryan Machado · Accepted Answer · 2023-02-01 21:23:52Z

1

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

answered Feb 1, 2023 at 21:23

Ryan Machado

264 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Suyash Vashishtha · Accepted Answer · 2023-02-02 11:39:43Z

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.

Eric Fortis · Accepted Answer · 2023-02-01 21:23:29Z

0

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}`))

answered Feb 1, 2023 at 21:23

Eric Fortis

17.5k6 gold badges43 silver badges63 bronze badges

Comments

Martin Arreola · Accepted Answer · 2023-02-01 21:24:09Z

0

I fixed it adding this to it

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

answered Feb 1, 2023 at 21:24

Martin Arreola

9911 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related