单击按钮时我无法指定列表项-React

Question

I am currently working on a to-do list. What I am trying to do is that when I click the "completed" button, I want to use the CSS "line-through" property on a list item whichever I want. However, when I press the button, all list items are selected. How can I get rid of this problem? If the answers will be as code, I would be grateful.

This is form component:

const [draw, setDraw] = useState("notDrawed")
const whenClicked = () => {
    setDraw("drawed")
  }

  return (
    <div id="container">
      <h1>todos</h1>
      <form onSubmit={onSubmit} >
        <input placeholder="What needs to be done?" name="todo" value={form.todo} onChange={handleChange} />
        <List forCurrentList={currentList} moveDraw={draw} />
        
        <div> 
          
          <button>Add</button>
          <button type="button">All</button>
          <button type="button">Active</button>
          <button type="button" id="completed" onClick={whenClicked} >
          Completed</button>
          
          </div>
        
        </form>

This is list component which items are listed:

import React, {useState} from "react"

function List({ forCurrentList, moveDraw}) {
  const [active, setActive] = useState(false)

  const handleList = () => {
    setActive(true)
    if (active === true) {
      setActive(false)
    }
  }

  return (
    <div>
      <ul>
        {forCurrentList.map((item, index) => {
          return (
            <React.Fragment key={index}>
              <li className={moveDraw} onClick={handleList} > {item.todo} </li>
            </React.Fragment>
            )
          
          })}
      </ul>
    </div>
  )
}

export default List

Finally, this is the CSS file:

.notDrawed {
  list-style: none;
  border-bottom: solid 2px rgba(128, 128, 128, 0.672);
  padding-bottom: 2px;
  padding-top: 7px;
  margin-right: 25px;
.drawed {
  list-style: none;
  border-bottom: solid 2px rgba(128, 128, 128, 0.672);
  padding-bottom: 2px;
  padding-top: 7px;
  margin-right: 25px;
  color: grey;
  text-decoration: line-through;
}
}

Answer 1

The completed button and the drawed state are common for all your list items. Try shifting this state toggle to the child to have individual drawed-notDrawed state on each of your list items.