How do I change the state of the checkbox here? - mysql

Question

I have been able to change the activation status of companies in database on onClick event of the checkbox. Now I am not able to toggle the status of the checkbox, What I am missing Here?
I have looked on various sites, but could not find the solution.
Here is my code in which i am printing the companies.
{this.state.allCompanies.map(com => (
<tr>
<td>{com.cname} </td>
<td>
<a>
<input
type="checkbox"
name="active"
checked={com.is_active == 1 ? "true" : ""}
onClick={
(() => {
this.setState({ cked: !this.state.cked });
},
e => this.handleActivated(e, com.cid))
}
/>
</a>
</td>
</tr>
))}
Here is my function.
handleActivated(e, id) {
const comid = id;
var data = {
comid: id
};
console.log(data);
fetch("http://localhost:5000/edit/company", {
method: "POST",
headers: {
Accept: "application/json, text/plain, */*",
"Content-Type": "application/json"
},
body: JSON.stringify(data)
})
.then(function(response) {
if (response.status >= 400) {
throw new Error("Bad Response from server");
}
return response.json();
})
.then(function(data) {
console.log(data);
if (data === "success") {
// e.target.checked : !e.target.checked;
this.setState({ msg: "Company Edited", active: !e.target.checked });
}
})
.catch(function(err) {
console.log(err);
});
// this.setState({ });
}

Answer 1

You are passing two functions to the onClick and as far as I know (though I am not able to give a source for this or tell you why) react will only use the last value you give to props. This is why setting the state of cked probably did not work.
I would suggest giving it only 1 function like so:
onClick={
(e) => {
this.setState({ cked: !this.state.cked });
this.handleActivated(e, com.cid)
}
}
If you want to only execute the second one after the setState is done(since it is async), you should use the callback function of setState.
onClick={
(e) => {
this.setState({ cked: !this.state.cked }, () => {
this.handleActivated(e, com.cid)
});
}
}