title: How to retain checked value when filtering list
body: <p>I have a filtering function 'filterUsers' working on the 'filteredUsers' array of objects. Each object is rendered as a list item with some data and a checkbox. The function is fired every time the user changes the text input value. If an item is checked when filtered out the checked value is lost. I need a solution to retain the checked value.</p>
  <pre><code>const UsersList = () =&gt; {
  const { users } = useContext(UsersContext);
  const [checkedUsersIds, setCheckedUsersIds] = useState([]);
  const [filteredUsers, setFilteredUsers] = useState([]);
  
  useEffect(() =&gt; setFilteredUsers(users), [users]);
  useEffect(() =&gt; console.log(checkedUsersIds), [checkedUsersIds]);
  
  const checkUsers = async e =&gt; {
      if (e.target.checked) {
          const checkedUser = users.find(user =&gt; user.id === Number(e.target.name));
          setCheckedUsersIds([...checkedUsersIds, checkedUser.id]);
      } else {
          setCheckedUsersIds(checkedUsersIds.filter(user =&gt; user !== Number(e.target.name)));
      }
  };
  
  const filterUsers = e =&gt; {
      setFilteredUsers(
          users.filter(
              user =&gt;
                  user.first_name.toLowerCase().includes(e.target.value.toLowerCase().trim()) ||
                  user.last_name.toLowerCase().includes(e.target.value.toLowerCase().trim())
          )
      );
  };
  
  return (
      &lt;&gt;
          &lt;input
              type=&quot;text&quot;
              name=&quot;filter_users&quot;
              className={classes.filter_input}
              onChange={e =&gt; filterUsers(e)}
              placeholder=&quot;search user...&quot;
              autoComplete=&quot;off&quot;
          /&gt;
  
          &lt;ul&gt;
              {filteredUsers.length ? (
                  filteredUsers.map(user =&gt; {
                      return (
                          &lt;label key={user.id} htmlFor={user.name}&gt;
                              &lt;li className={classes.user_container}&gt;
                                  &lt;div className={classes.user_subcontainer}&gt;
                                      &lt;div
                                          className={`${classes.avatar_container} ${
                                              user.gender === 'Male' ? classes.male : classes.female
                                          }`}
                                      &gt;
                                          {user.avatar ? (
                                              &lt;img className={classes.avatar} src={user.avatar} alt=&quot;#&quot; /&gt;
                                          ) : (
                                              &lt;div className={classes.img_alt}&gt;
                                                  {user.first_name.slice(0, 1)}
                                                  {user.last_name.slice(0, 1)}
                                              &lt;/div&gt;
                                          )}
                                      &lt;/div&gt;
                                      &lt;h3
                                          className={user.gender === 'Male' ? classes.male_text : classes.female_text}
                                      &gt;
                                          {user.first_name} {user.last_name}
                                      &lt;/h3&gt;
                                  &lt;/div&gt;
                                  &lt;div className={classes.checkbox_container}&gt;
                                      &lt;input type=&quot;checkbox&quot; name={user.id} onChange={e =&gt; checkUsers(e)} /&gt;
                                  &lt;/div&gt;
                              &lt;/li&gt;
                          &lt;/label&gt;
                      );
                  })
              ) : (
                  &lt;h1 className={classes.list_loading}&gt;List loading...&lt;/h1&gt;
              )}
          &lt;/ul&gt;
      &lt;/&gt;
  );
  </code></pre>
  <p>};</p>