How to grab checkboxes and put them into state? - reactjs

Question

My problem is the following: I have a table, where I generate a row with a person's name, details and details2 from an object in the DB. Next to each person there is a checkbox. I need to put those on check into an object in state and remove them from there when unchecked, because I am going to send this object on submit to the server.
How and what is the best way to do that?
I tried with current.value but I am going in circles and I don't think I have the correct idea.
<tr>
<td>
<table >
<tbody>
<tr>
<td>
<div>
<input type="checkbox"/>
<label>
data 1
</label>
</div>
</td>
<td data-title="Column 2">
data 2
</td>
<td >
<a href="#">
Edit
</a>
Delete
</a>
</td>
<td data-title="Column 5">
data 3
</td>
</tr>
</tbody>
</table>
</td>
</tr>```

Answer 1

You can have a handleChange function:
handleChange = ({ target }) => {
this.setState(prevState => ({
value: {
...prevState.value,
[target.name]: target.value
},
}));
And use it on the checkboxes (be sure to name each checkbox uniquely):
<input type="checkbox"
...
name="Checkbox1"
onChange={this.handleCheckboxChange}
/>
Initialize the state with something like this:
this.setState({
value: {},
});
Now, in the object value, you have values of all those checkboxes, and that object looks something like this:
value = {
Checkbox1: true,
Checkbox2: false,
...
}
You mention removing them from the state if they are unchecked. I suggest filtering:
const { value } = this.state;
const trueCheckboxesKeys = value.keys().filter(valueKey => value[valueKey]);
let trueCheckboxes = {};
for(i = 0; i < trueCheckboxesKeys.Length; i++) {
trueCheckboxes[trueCheckboxesKeys[i]] = true;
}

Answer 2

You can create an onChange event handler and record event.currentTarget.checked as it will return true or false. I would also recommend adding some kind of identifier to the input element so you can tell which element is being checked so you can track it correctly.

Answer 3

I've done something similar where a user checks a box and it updates state.
You'll need an event handler for the checkbox, plus componentDidUpdate to see if the checkbox value changed.
componentDidUpdate(prevProps, prevState) {
const { CHECKBOX_NAME } = this.state;
if (CHECKBOX_NAME !== prevState.CHECKBOX_NAME) {
if (CHECKBOX_NAME === true) {
this.setState({
// do whatever
});
} else {
this.setState({
// change back if necessary
});
}
}
}
handleCheckboxChange = event => {
const { checked } = event.target;
this.setState({
// mark box as checked in state
});
};
...
// checkbox
<input type="checkbox"
checked={this.state.CHECKBOX_NAME}
onChange={this.handleCheckboxChange}
/>
//

Answer 4

It depends on how you are fetching the data you render, does it come from props or do you get it from api, but generally, provided you have the users array, it could look smth like this:
const UserList = props => {
const [selectedUsers, setSelectedUsers] = useState([]);
// Your user data here
const userData = [
{
id: "1",
name: "User1",
details: {
/*details here */
}
}
];
// Check if user is selected
const isUserSelected = user => !!selectedUsers.find(u => u.id === user.id);
// Add user to selected or remove if already there
const selectUser = user => {
setSelectedUsers(users => {
if (isUserSelected(user)) {
return users.filter(u => u.id !== user.id);
}
return [...users, user];
});
};
return (
<table>
<tbody>
{userData.map(user => (
<tr key={user.id}>
<td>
<label htmlFor={`user_${user.id}`}>{user.name}</label>
<input
id={`user_${user.id}`}
type="checkbox"
checked={isUserSelected(user)}
onChange={() => selectUser(user)}
/>
</td>
</tr>
))}
</tbody>
</table>
);
};