CODEWITHSUNDEEP
javascriptreactjs
dungreact
dungreact

Reputation: 544

How to re-render a callback function in ReactJS?

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

Upvotes: 0

Views: 1148

Answers (2)

ericobi
ericobi

Reputation: 549

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.

Upvotes: 1

iamhuynq
iamhuynq

Reputation: 5539

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

Upvotes: 2

Related Questions