React Hooks Modify Array In Table


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>

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?

Source: JavaSript – Stack Overflow

September 1, 2021
Category : News
Tags: javascript | react hooks | react-bootstrap | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.