How to user useState hooks on different instances? - reactjs

Question

I am pretty new on JavaScript, React, and hooks and I have created a React useState's hook to increase the counter. Based on the following code, the number changes and it goes up on one record, but when I have more than one record all counters increase no matter which button I click. I would like any suggestion as to why it behaves like this will be greatly appreciated:
import React, {useState, useEffect } from 'react';
import { Link } from 'react-router-dom'
import vendors from './vendors.css'
const VendorsShow = (props) => {
const handleDelete = (vendor) => {
props.deleteVendor(vendor.id);
}
const [ count, setCount ] = useState(0)
// similar to componentDidMount:
useEffect(() => {
document.title = `You clicked ${count} times`
})
return (
<div className="vendor-show-div" style={vendors}>
{props.vendors.map((vendor) =>
<ul key={vendor.id}>
<Link to={`/vendors/${vendor.id}`}>{vendor.name}
- ${vendor.total_cost}
</Link>
- <button onClick={() => handleDelete(vendor)}>X</button>
- <button onClick={() => setCount(count + 1)}>{count}</button>
</ul>)}
</div>
);
}
export default VendorsShow;

Answer 1

Each element you are mapping would need its own counter state. Either an array/object of counters, or you abstract a component that maintains its own count state.
I suggest using an object to store count values using the vendor's id property.
const VendorsShow = (props) => {
const handleDelete = (vendor) => {
props.deleteVendor(vendor.id);
};
const [counts, setCounts] = useState({}); // <-- initial empty object for counts
// similar to componentDidMount:
useEffect(() => {
document.title = `You clicked ${Object.values(counts).reduce(
(total, { count }) => total + count,
0
)} times`;
});
// initialize/update state when vendors array changes
useEffect(() => {
setCounts(
props.vendors.reduce(
(counts, { id }) => ({
...counts,
[id]: 0 // <-- store counts by vendor id
}),
{}
)
);
}, [props.vendors]);
const handleCount = (id) => () =>
setCounts((counts) => ({
...counts,
[id]: counts[id] + 1 // <-- update specific vendor's count
}));
return (
<div className="vendor-show-div" style={vendors}>
{props.vendors.map((vendor) => (
<ul key={vendor.id}>
<Link to={`/vendors/${vendor.id}`}>
{vendor.name}- ${vendor.total_cost}
</Link>
- <button onClick={() => handleDelete(vendor)}>X</button>-{" "}
<button onClick={handleCount(vendor.id)}>{counts[vendor.id]}</button>
</ul>
))}
</div>
);
};

Answer 2

In your code, count is an independent state value not depends on your venders.
You need to include count variable for each vender and update them accordingly.
Something like this :
const [venders, setVenders] = setState(venders);
<button onClick={() => {
var temp = [...venders];
temp [i].count = temp [i].count + 1;
setVenders(temp);
}>{venders[i].count}</button>