how to cause react to re-render checkboxes

Question

So, I am getting a list of data from the backend

const [data, setData] = useState([]);
const getDataSet = async () => {
const { data } = await inapp.get('/v1/vcr/getData');
setData(data.payload);

useEffect(() => {
  getData();
}, []);

I am rendering a list of checkboxes using the array map function Then, I have a button

const [checked, setChecked] = useState([]);
  const handleToggle = (value) => {
    const currentIndex = checked.indexOf(value);
    const newChecked = [...checked];

    if (currentIndex === -1) {
      newChecked.push(value);
    } else {
      newChecked.splice(currentIndex, 1);
    }
    setChecked(newChecked);
  };
  const renderDataCheckboxes = () => {
    return (
      <div className={classes.inlineChecks}>
        {data.map((row) => {
          return (
            <FormControlLabel
              key={row.id}
              control={
                <Checkbox
                  tabIndex={-1}
                  onClick={() => handleToggle(row.name)}
                  checked={checked.indexOf(row.name) !== -1}
                  checkedIcon={<Check className={classes.checkedIcon} />}
                  icon={<Check className={classes.uncheckedIcon} />}
                  classes={{
                    checked: classes.checked,
                    root: classes.checkRoot,
                  }}
                />
              }
              classes={{ label: classes.label }}
              label={row.name}
            />
          );
        })}
      </div>
    );
  };

I also have a button that will remove the checked items from the backend. Question is, how do I cause the checkboxes to re-render to remove the deleted items?

If i understand correct you want if some one checked that checkbox. You want to remove from checkbox list? — Shubham Verma, Sep 10 '20 at 05:03
is the useState for data and useState for checked two different components? Because your handleToggle function updates your `checked` array but you're actually rendering `data` state. If you want your component to re-render then in your handleToggle function, update the data slice of state. — Hyetigran, Sep 10 '20 at 05:11
@Hyetigran in the function the the button invoke to delete data from the backend, I am refreshing the data from there. — Bill, Sep 10 '20 at 07:26
@Bill Then you can filter the data. If checkbox is true dont show on ui — Shubham Verma, Sep 10 '20 at 07:32
it turns out it has something to do with the async await function calls to the backend. For some reason, the call is not updating my state variable. I have posted a separate question on this. — Bill, Sep 10 '20 at 11:13

score 0 · Answer 1 · answered Sep 10 '20 at 06:12

0

Here are the 4 methods to re-render components in react, not necessarily CheckBox

https://linguinecode.com/post/4-methods-to-re-render-react-component

Although it works, forceRender() is not recommendded anywhere

answered Sep 10 '20 at 06:12

Aroo

55
1
10

score 0 · Answer 2 · answered Sep 10 '20 at 13:45

this was due to the way i handled the deletion. I was using foreach and apparently it fires await calls without waiting. I switched to for..of loop and it works. Please see my other post for more details.

async await not behaving as expected in reactjs

how to cause react to re-render checkboxes

2 Answers2