How to re-render a callback function in ReactJS?

Question

I'm making a filter function by checkbox. I made a reproduce like below. I changed values in array but checkbox checked status not change, what I missed? I think I must re-render list but it's also refill checked array to initial state. What should I do? Thanks!

import * as React from "react";
import "./styles.css";
import { Checkbox } from "antd";

const arr = [
  {
    name: "haha"
  },
  {
    name: "haha2"
  },
  {
    name: "hahaha"
  }
];

const App = () => {
  let [viewAll, setViewAll] = React.useState(true);
  let checked = new Array(3).fill(true);

  // render calendars checkbox
  let list = arr.map((value, index) => {
    return (
        <Checkbox
          style={{ color: "white" }}
          checked={checked[index]}
          onChange={() => handleFilter(value, index)}
          className="check-box"
        >
          haha
        </Checkbox>
    );
  });

  const handleViewAll = () => {
    setViewAll(!viewAll);
    checked = checked.map(() => viewAll);
  };
  const handleFilter = (value, index) => {
    setViewAll(false);
    checked.map((_value, _index) => {
      if (_index === index) {
        return (checked[_index] = !checked[_index]);
      } else {
        return checked[_index];
      }
    });
    console.log(checked);
  };

  return (
    <div className="App">
      <Checkbox checked={viewAll} onChange={() => handleViewAll()}>Check all</Checkbox>
      {list}
    </div>
  );
};

export default App;

Here is codesanboxlink

Tony Nguyen · Accepted Answer · 2020-06-22 03:34:05Z

2

You should create checked state. Check the code below.

let [viewAll, setViewAll] = React.useState(true);
let [checked, setChecked] = React.useState([true, true, true]);

  // render calendars checkbox
  let list = arr.map((value, index) => {
    return (
      <Checkbox
        style={{ color: "black" }}
        checked={checked[index]}
        onChange={() => handleFilter(value, index)}
        className="check-box"
      >
        {value.name}
      </Checkbox>
    );
  });

  const handleViewAll = () => {
    setViewAll(!viewAll);
    setChecked(() => checked.map(item => !viewAll));
  };
  const handleFilter = (value, index) => {
    setViewAll(false);
    setChecked(() =>
      checked.map((_value, _index) => {
        if (_index === index) return !checked[_index];
        return checked[_index];
      })
    );
  };

  return (
    <div className="App">
      <Checkbox checked={viewAll} onChange={() => handleViewAll()}>
        {checked}
      </Checkbox>
      {list}
    </div>
  );

codesandbox demo

edited Jun 22, 2020 at 3:34

Tony Nguyen

3,49814 silver badges20 bronze badges

answered Jun 22, 2020 at 3:28

iamhuynq

5,5572 gold badges17 silver badges41 bronze badges

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

1 Comment

Bruno Monteiro Over a year ago

Please add an english version for your answer, as this is intended to help others as well (and this is the English version of SO)

ericobi · Accepted Answer · 2020-06-22 03:59:26Z

1

You have to define checked array as a state value.

Right now your code is not firing render function because checked array is not props but also not state.

answered Jun 22, 2020 at 3:59

ericobi

5493 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to re-render a callback function in ReactJS?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related