jeudi 7 octobre 2021

change checked value of mapped items react

I am struggling with logic on how to check off these checkboxes individually. I want to be able to check off a list item when I visit a slide/click a list item.

"context.index" is mapped to an array and renders the list. "context.currentSlide" is the array index number. My thought it to set the checkbox to checked based on the currentslide number, but so far it checks all of them..Do i need to use e.target.checked somehow?

MY ATTMEPT

 const [isChecked, setIsChecked] = useState(false);

 
  const checkHandler = (param) => {
    if (param === context.currentSlide) {
      setIsChecked(true);
    }
  };
return(
        <div>
          {context.index &&
            context.index.map((title, i) => (
              <div
                key={i}
                onClick={() => {
                  checkHandler();
                }}
              >
                <input type="checkbox" checked={isChecked} onChange={checkHandler} />
                <div>
                  {i}. {title}
                </div>
              </div>
            ))}
        </div>
);

Example




Aucun commentaire:

Enregistrer un commentaire