I'm having trouble in React modifying values from an array with useState after rendering them to a table. Here's a simple example:
//The hook
const [awayAbilityAdjust, setAwayAbilityAdjust] = useState([1, 1, 1, 1, 1]);
Now, I render it to a table in Bootstrap with a Form:
<tr>
<td>Ability Adjust</td>
{awayAbilityAdjust.map((ability, index) => (
<td key={index}>
<Form.Control
size="sm"
type="number"
name="ability-input"
step="0.1"
value={ability}
style={{
width: "50px",
backgroundColor: "#6d784b",
color: "#ffff",
}}
min="0"
max="10"
onChange={updateHomeAbility(index)
}
/>
</td>
))}
</tr>
Here is updateHomeAbility:
const updateHomeAbility = (index) => (e) => {
const updatedArray = [...homeAbilityAdjust];
homeAbilityAdjust[index] = e.target.value;
setHomeAbilityAdjust(updatedArray);
};
However this doesn't change any of the values when I select the up and down buttons on the Form. How can I modify these values using useState?
You're updating homeAbilityAdjust after copying it to updatedArray. You simply need to update updatedArray instead.
const updateHomeAbility = (index) => (e) => {
const updatedArray = [...homeAbilityAdjust];
updatedArray[index] = e.target.value;
setHomeAbilityAdjust(updatedArray);
};