handle checkbox data and store in a state/variable-CodePudding

How can I store the selected value in another state and stop unchecking the value when I select another button?

const Notifications = () => {


data:[
{id:1, name:apple, notification:{id:1,msg:"hi"}, {id=2,msg:"hlo"}},
{id:2, name:banana, notification:{id:13,msg:"hi"}, {id=3,msg:"hlo"}}
{id:3 ,name:mango, notification:{id:14,msg:"hi"}, {id=34,msg:"hlo"}},
{id:4, name:grape, notification:{id:15,msg:"hi"}, {id=341,msg:"hlo"}},
{id:5, name:carrot, notification:{id:16,msg:"hi"}, {id=4,msg:"hlo"}},
]

  const onCheckedValue = (e) => {
        const { checked, value } = e.target;
        if (checked) {
            setCheckedData([...checkedData, value]);
        } else {
            setCheckedData(checkedData.filter((item) => item !== value));
        }
    };  

return(
<>
{data.map(d => {
<Button onClick=(setActive(true))>
{d.name}

</Button>

})}

//render the notifications when I clicked on the button I want to store the checked value in a state with respect to the selected button and checked notification.

{active ? 
data.notifications.map((notification) => (
           <div className="checkbox">
           <Checkbox
           onChange={onCheckedValue}
           value={notification}
            />
          /div>
}
</>

)

}

CodePudding user response：

You can use the React Use State Hook. You'll want to define a variable and a state setter for that variable like so: const [selected, setSelected] = useState([]);

Then when you click or un-click a checkbox, you can call setSelected with the updated selected value. I instantiated selected as an empty array in my example, so you'd arr.push(new value).

CodePudding user response：

Your second block of code is where there are issues.

You are attempting to access properties on data, but that is an array and you cannot access the properties of the objects inside of it like that.

You will need to loop over the array or access an index of the array directly in order to access notifications.

As a side note, you are attempting to use the ternary operator to conditionally render (?), but not supplying the second argument after the :. I gave it a value of null so that it doesn't render anything if not active.

That could look something like this:

// I don't know where active comes from, but I'll assume that's correct.
{active ? (
  data.map((item) => (
    <div className="checkbox">
      <Checkbox
        onChange={onCheckedValue}
        checked={!!checkedData.find(name => name === item.name)}
        value={item.name}
      />
    </div>
  ))) : null
}

In this example, I map over data and create a Checkbox for each item in the array. I don't know if that's what you want as it's unclear. However, with your onCheckedValue function, it will make updates to the checkedData array.

You should pass the prop checked to control the checkbox's state. I set the checked value to the return of checkedData.find(), and used the double-bang (!!) operator to coerce it into a Boolean value (true or false).

The find operation will be looking to see if the data[i].name matches any value in the checkedData array, since you are storing the object's name property in the checkedData array. If it finds nothing, it will be !!undefined which will evaluate to false, and if it does find it, it will be !!"banana" which evaluates to true.