[FIXED] How can I check all checkboxes with one checkbox and add a class to their parent element in React using use-state?

Issue

I am trying to do a to-do app and at one point I am completely stuck.

This is my current page so far: src="https://i.stack.imgur.com/tpucF.jpg" alt="enter image description here" />

I am going to explain to you what I am trying to do on the above page in short.

I have text input in which I write my to-dos.

When I submit it, it appears below in a li element. There is an array and those strings are stored there and printed with map method.

There are circle checkboxes left of the writings and when I checked them a class is added to a li element which is "completed"

Till here I have had no problem. Now there is a down arrow left of text input. When I checked it I wanted it to check all checkboxes down below and add "completed" class to their li elements. It is coded like:

<input className = "toggle-all" type = "checkbox"/>
        <label htmlFor = "toggle-all" >
        Mark all as complete
        </label>

And here is my App.js, two components. Footer is not important.

Main component, Footer is not important again.

Header component

And the component I am struggling with is the Section

I have tried a lot of things yet I couldn't find a solution. Might be too many images and explanations but I wanted to make it clear for everybody. I want to use usestate to track all checkboxes but if the solution is not possible like that I am okay with the other solutions.

4.11.22

I created this question 2 days ago. During these two days, I tried various codes yet I couldn't make them work the way I wanted.

Solution

Instead of creating setTexts as array of string set it as array of object. Where object can be like this:

let obj = {
  text: "todo item 1",
  ischecked: false
}

const [listItem, setListItem] = useState([])

when adding new items in list you can do like this:

setListItem([...listItem, {text: "something to do another list", ischecked: false}])

when checking individual item call method onCheck(args):

const onCheck = (selectedItem) => {
  let updatedList = listItem.map((item) => {
     if(item.text === selectedItem.text){
       return {
        text: item.text,
        ischecked: true
       }
     }
     return item
  })
  setListItem([...updatedList])
}

And Finally to your questions answer. Once you click dropdown arrow call method checkedAllToDoList():

const checkedAlToDoList = () => {
  let updatedList = listItem.map((item) => {
     return {
       text: item,
       ischecked: true
     }
  })
  setListItem([...updatedList])
}

Note: complete the flow as which method should pass as a props on which components

Answered By - Sujit Libi
Answer Checked By - - Candace Johnson (ReactFix Volunteer)