JSX Not Updating In Real Time When Checkboxes Checked In React

Question

Attempting to do a recipe app, where once you check the boxes, the recipe array updates, and the counter at the bottom is updated as you check them. So far though, I have only been able to do one or the other, if I add the ingredient to the array, I can't update the counter, and if I update the counter, I cannot update the array. Here's what I have so far.

import React from 'react'; 

function IngredientsCheckBoxes(props) {

    let newData = props.ingredients
    let newestArray = []
    let handleOnChange = (e) => {
        let isChecked = e.target.checked;
        if (isChecked) {
            for ( let i = 0; i <= newestArray.length; i++ ){
                if (e.target.value !== i) {
                    newestArray.push(e.target.value)
                    return newestArray
                }
            }
        } else if (isChecked === false) {
            newestArray = newestArray.filter(
                ingred => ingred !== e.target.value
            )
        }
    }

return ( 
    <div>
        <ul className="toppings-list">
            {newData.map(( name , index) => {
                return (
                    <li key={index}>
                        <div className="toppings-list-item">
                            <div className="left-section">
                                <input
                                    type="checkbox"
                                    id={`custom-checkbox-${index}`}
                                    name={name}
                                    value={name}
                                    onChange={e => handleOnChange(e)}
                                />
                     <label htmlFor={`custom-checkbox-${index}`}>{name}</label>
                                </div>
                            </div>
                        </li>
                    );
                })}
            </ul>
            <h1>{count goes here}</h1>
        </div>
    )
}

export default IngredientsCheckBoxes;

I previously used a useState hook, but where ever I put it in the handleOnChange function, it takes over and won't put the ingredient in the array.

I have a feeling the answer is super obvious but after looking at the code for a while I'm looking for outside help, any of which would be appreciated. Thank you in advance.

Answer 1

You're supposed to use state to keep track of what's changing inside your component.

Also,

• you should avoid using array index as a key
• and would be much better off addressing your items by unique id (name) rather than rely on their position inside array (that's being constantly changed)
• and drop dynamically generated id's, as odds of never using those for referring to specific DOM node are quite high
• breaking your UI into more granular (reusable) components would be good for your app

Distilled example of what you're (seemingly) trying to achieve, may look as follows:

const { useState } = React,
      { render } = ReactDOM,
      rootNode = document.getElementById('root')
      
const CheckListItem = ({onHit, label}) => {
  return (
    <label>
      <input type="checkbox" onChange={() => onHit(label)} />
      {label}
    </label>
  )
}

const CheckList = ({itemList}) => {
  const [selectedItems, setSelectedItems] = useState(
    itemList
      .reduce((acc, itemName) => 
        (acc[itemName] = false, acc), {})
  )
  const onCheckItem = itemName => 
    setSelectedItems({...selectedItems, [itemName]: !selectedItems[itemName]})
  const numberOfChosenItems = Object
    .values(selectedItems)
    .filter(Boolean)
    .length
  const listOfChosenItems = Object
    .keys(selectedItems)
    .filter(itemName => selectedItems[itemName] === true)
    .join(', ')
  

  return !!itemList.length && (
    <div>
      <ul>
        {
          itemList.map(itemName => (
            <li key={itemName}>
              <CheckListItem
                label={itemName}
                onHit={onCheckItem}
              />
            </li>
          ))
        }
      </ul>
      {
        !!numberOfChosenItems && (
          <div>
            Chosen items: {listOfChosenItems} (Total: {numberOfChosenItems})
          </div>
        )
      }
    </div>
  )
}

const ingredients = ['flour', 'eggs', 'milk', 'sugar']

const App = () => {
  return (
    <CheckList itemList={ingredients} />
  )
}

render (
  <App />,
  rootNode
)

li {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

Answer 2

newestArray should be a state in order to re-render IngredientsCheckBoxes component and subsequently show changes in the component view.

const [selectedIngredients, setSelectedIngredients] = useState([]);

And then use selectedIngredients and setSelectedIngredients to use and update state respectively.

Here's a codesandbox with the working code.

Make sure you use suitable names for state. selectedIngredients is a better name than newestArray as it does tell you about what it actually means.