CODEWITHSUNDEEP
reactjsreact-nativejsx
Martin Arreola
Martin Arreola

Reputation: 99

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

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

Upvotes: 0

Views: 844

Answers (4)

Suyash Vashishtha
Suyash Vashishtha

Reputation: 755

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.

Upvotes: 1

Martin Arreola
Martin Arreola

Reputation: 99

I fixed it adding this to it

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

Upvotes: 0

Ryan Lucas
Ryan Lucas

Reputation: 26

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

Upvotes: 1

Eric Fortis
Eric Fortis

Reputation: 17350

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

Upvotes: 0

Related Questions