Creating a counter in react hooks

I am creating a table showing all product but i would like to create a automatic counter as well my code:

import { useState} from 'react' ;


const ProductTable = ({products}) => {
const[number, setNumber] = useState(1);

    return ( 
<div>
        <table style={{ width: "100%"}}>
        <tr>
        <th>Nr.</th>
        <th>Title</th>
        <th>description</th>
        <th>price</th>
        <th>quantity</th>
        </tr>
        {products.map((product) => (
        <tr key={product.id} >
        <td>{number}</td>
        <td>{product.name}</td>
        <td>{product.description}</td>
        <td>{product.price}</td>
        <td>{product.quantity}</td>
        </tr>
        ))}
        </table>
        </div>

     );
}
 
export default ProductTable;

i have tried to achive this with useEffects to increase number after each render, but that didnt work either. can someone help me

I don’t understand, what should trigger the increase of the number? A click on a button or something? Because if you increase without any condition on every render with useEffect, you’re likely going to end up with an infinite loop and endless re-renders.

yeah the useEffect is not a good idea,
the code above is not finished I just didnt know how to code it further.
its just to show the rest of the code and how i want to use it

What is the counted number for?

What is the counted number for?

i wanted to number each product that is in the table

Perhaps you could just use their index? I’m not entirely sure as to what extent you need use of the number, but that may work.

Perhaps you could just use their index? I’m not entirely sure as to what extent you need use of the number, but that may work.

i can use the id from the api but thats not what i want i want to learn how react does that it should not be that hard to create a automated counter?

At base this is the most simple counter I can think of:

const Counter = () => {
    [count, setCount] = useState(0);

    return (
        <div>{count}</div>
        <button onClick={() => {setCount(count + 1)}}></button>
    )
}

This counter is of course triggered by a click event, and the key thing here is you need something to trigger your state to change.

It does it the same as JavaScript, there isn’t a special React way to do this. Preferably you use the ID of the product, as that makes the most sense. Or you use the index of the item you’re on in a loop (map gives you that). Or you generate one another way based on something else – that could be anything.

I see, if what he wants is a special key then react does recommend the use of the id, but if you don’t have an id and you really want a special key you can in fact just keep a variable in memory that is a number you increase every time you use it as a key.

This variable would be kept in its own file and you would simply import it for use. There are other methods of accessing the counter, possibly Redux, but just having it in its own file would be sufficient.

You would need a way to update the counter, but I do not imagine it would nee to be a piece if a state.

Personally I just end up using the index myself.

Yeah if this is just what I think it is – numbering the items in the table – then definitely the index (just index + 1 I guess?). The key just needs to be unique, so the product ID is ideal

is see, could someone give me an example how to use the index in the map loop

Callback function’s second argument is the index

Edit: React itself has a small API, and almost everything you use in it is just JS, so I’d suggest making sure you’ve got a really good handle on that would really help w/r/t React.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.