score:0

this is a full working example, you can check all label from parent:

const parent = () => {
  const [todos, settodos] = react.usestate([
    { id: 1, label: "wake up", completed: true },
    { id: 2, label: "make coffee", completed: false },
    { id: 3, label: "go to work", completed: false }
  ]);
  const checkall = react.usememo(() => {
    const filtertodos = object.assign([], todos);
    return (
      filtertodos.filter(f => f.completed === true).length === todos.length
    );
  }, [todos]);
  const checkalltodos = e => {
    const value = e.target.checked;
    settodos(current => current.map(f => ({ ...f, completed: value })));
  };
  const checktodo = react.usecallback(id => {
    settodos(current =>
      current.map(item => {
        if (item.id === id) return { ...item, completed: !item.completed };
        else return item;
      })
    );
  }, []);
  return (
    <div>
      <ul>
        <li>
          <input type="checkbox" checked={checkall} onchange={checkalltodos} />
          todos {checkall}
        </li>
        {todos.map(item => (
          <todo
            id={item.id}
            checked={item.completed}
            key={item.id}
            change={checktodo}
          >
            {item.label}
          </todo>
        ))}
      </ul>
    </div>
  );
};
const todo = react.memo(({ checked, children, id, change }) => (
  <li>
    <input type="checkbox" checked={checked} onchange={() => change(id)} />
    {children}
  </li>
));
reactdom.render(<parent/>,document.getelementbyid("root"))
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<div id="root"></div>

score:1

i don't really have that much familiarity with the way you are trying to do it, but i can suggest an alternative. instead of doing that, you can do something like this:

const [checkedelements, setcheckedelements] = usestate([]);

then when you map and create the elements you can use the index of the map method to say something like

onclick={()=>setcheckedelements([...checkedelements, index])}
checked={checkedelements.includes(index)}

you can clear all the elements when clicking the button by adding this on the button:

onclick={setcheckedelements([])}

Related Query

More Query from same tag