React Hooks Modify Array In Table

Question

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?

Can you show the code of updateHomeAbility?

Ron B.
– Ron B.

2021-09-01 18:17:42 +00:00
Commented Sep 1, 2021 at 18:17 — Ron B.
– Ron B., Commented Sep 1, 2021 at 18:17
@RonB. Apologies, just added it, silly of me.

clattenburg cake
– clattenburg cake

2021-09-01 23:40:59 +00:00
Commented Sep 1, 2021 at 23:40 — clattenburg cake
– clattenburg cake, Commented Sep 1, 2021 at 23:40

emeraldsanto · Accepted Answer · 2021-09-01 23:50:55Z

3

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

answered Sep 1, 2021 at 23:50

emeraldsanto

4,7611 gold badge17 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

React Hooks Modify Array In Table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related