ReactJS 从 onClick 函数更改 JSX

Question

i have a backend api build on nodejs. in the code the api return some categories array. i ran .map() function on the array to display the array in the JSX. after that i added a checkBox to each object inside the array.

so what im trying to do is if the checkbox is true its will added another h1 Element (JSX). Only to the object i clicked on the checkbox.

i tryied to add "status" props and make it false or true and then catch it with onClick e.target.status? "YES" : "NO"

also, i tried to added checkBox useState and make it true or false . and its work. but not as i want its display Yes or No to the all objects and not only to the on i clicked on.

const Category = ({ history }) => {
const dispatch = useDispatch()
const user = useSelector((state) => state.waiter)
const selectedCategory = useSelector((state) => state.selectedTable)

const [currectCategory, setCurrectCategory] = useState([])
const [categoryName, setCategoryName] = useState("")
const [categoryIMG, setCategoryIMG] = useState("not found")

const [checkBox, setCheckBox] = useState("false")

useEffect(() => {
    if (!user.name) {
        history.push('/login')
    } else {
        (async () => {
            const res = await fetch('http://localhost:1000/categories/' + selectedCategory)
            const data = await res.json()
            setCurrectCategory(data.CurrectCountry.subcategories.map(sc => sc.name))
            setCategoryName(data.CurrectCountry.name)
            setCategoryIMG(data.CurrectCountry.img)
        })()
    }
}, [user])

const goBack = () => {
    dispatch({
        type: 'ALL_CATEGORIES'
    })
    history.push('/login')
}

const handleCheck = (e) => {
    setCheckBox(e.target.checked.toString())
    console.log(e.target.checked)

}
return (
    <>
        <Button className="LogButton" color="secondary" onClick={goBack}>back</Button>
        <div className="SingleCategory">
            <h1>{categoryName}</h1>
            <ListGroup>
                {currectCategory.map(category => {
                    return (
                        <Row className="Col-padd" key={category}>
                            <div>
                                <InputGroup className="mb-3">
                                    <b className="ItemName"> {category} </b>
                                    <img src={categoryIMG} height="100" width="100" ></img>
                                    <FormCheck id={category} className="Checkbox" onChange={handleCheck}></FormCheck>
                                    {checkBox == "true" ? <b>yes</b> : <b>No</b>}
                                </InputGroup>
                            </div>
                        </Row>
                    )
                })}
            </ListGroup>
        </div>
    </>
)

}

Thanks for help !!

Answer 1

You are only creating a single value for the checkbox. If you want to show for all the checkbox, if you have to track the value for each checkbox shown below,

const [checkBox, setCheckBox] = useState({}); // checkBoxName: value



 const handleCheck = (e) => {
    setCheckBox((prev) => {...prev, [e.target.name]: e.target.value};
   }


 {!!checkBox['name'] === true ? <b>yes</b> : <b>No</b>} 
//change the attribute according to your implementation.

Answer 2

Your problem is that you're just creating a single value for the checkbox and not separating the individual checkboxes. You could solve this in many different ways, but you would be well served by extracting the code for your checkbox to a separate component.

const Checkbox = ({ category, categoryIMG }) => {
  const [isChecked, setIsChecked] = useState(false);

  const handleCheck = () => {
    setIsChecked((prevState) => !prevState);
  };

  return (
    <Row className="Col-padd" key={category}>
      <div>
        <InputGroup className="mb-3">
          <b className="ItemName"> {category} </b>
          <img src={categoryIMG} height="100" width="100"></img>
          <FormCheck id={category} className="Checkbox" onChange={handleCheck}></FormCheck>
          {isChecked == 'true' ? <b>yes</b> : <b>No</b>}
        </InputGroup>
      </div>
    </Row>
  );
};

With a separate checkbox component like above you could instantiate it like this in the map:

<ListGroup>
    {currectCategory.map((category) => (
        <Checkbox category={category} categoryIMG={categoryIMG} />
    ))}
</ListGroup>