title: How to re-render a callback function in ReactJS?
body: <p>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 <code>list</code> but it's also refill checked array to initial state. What should I do? Thanks!</p>
  <pre class="lang-js prettyprint-override"><code>import * as React from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  import { Checkbox } from &quot;antd&quot;;
  
  const arr = [
    {
      name: &quot;haha&quot;
    },
    {
      name: &quot;haha2&quot;
    },
    {
      name: &quot;hahaha&quot;
    }
  ];
  
  const App = () =&gt; {
    let [viewAll, setViewAll] = React.useState(true);
    let checked = new Array(3).fill(true);
  
    // render calendars checkbox
    let list = arr.map((value, index) =&gt; {
      return (
          &lt;Checkbox
            style={{ color: &quot;white&quot; }}
            checked={checked[index]}
            onChange={() =&gt; handleFilter(value, index)}
            className=&quot;check-box&quot;
          &gt;
            haha
          &lt;/Checkbox&gt;
      );
    });
  
    const handleViewAll = () =&gt; {
      setViewAll(!viewAll);
      checked = checked.map(() =&gt; viewAll);
    };
    const handleFilter = (value, index) =&gt; {
      setViewAll(false);
      checked.map((_value, _index) =&gt; {
        if (_index === index) {
          return (checked[_index] = !checked[_index]);
        } else {
          return checked[_index];
        }
      });
      console.log(checked);
    };
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Checkbox checked={viewAll} onChange={() =&gt; handleViewAll()}&gt;Check all&lt;/Checkbox&gt;
        {list}
      &lt;/div&gt;
    );
  };
  
  export default App;
  </code></pre>
  <p><a href="https://codesandbox.io/s/keen-mccarthy-ch8xv?file=/src/App.tsx" rel="nofollow noreferrer">Here is codesanboxlink</a></p>