I am having problem updating my checkbox names status which is a boolen, either 1 or 0, i can't get it actual check, if the status is 1, the checkbox should display checked and if status is 0, it should be unchecked, but when i check my status checkbox, i can't uncheck it when i want to update it.
This is my EditProductCategory.jsx file
import { Link, useNavigate, useParams } from "react-router-dom";
import { useContext, useEffect, useState } from "react";
import DashboardSidebar from "../DashboardSidebar";
import { AppContext } from "../../Context/AppContext";
export default function EditProductCategory(props) {
const { id } = useParams();
const navigate = useNavigate();
const { token } = useContext(AppContext);
const [productCategoryInput, setProductCategoryInput] = useState({
name: "",
status: "",
meta_title: "",
meta_keywords: "",
meta_description: "",
});
const [errors, setErrors] = useState({});
async function getProductCategory() {
const res = await fetch(`/api/product_categories/${id}`, {
headers: {
Authorization: `Bearer ${token}`,
},
});
const data = await res.json();
if (res.ok) {
setProductCategoryInput({
name: data.productcategory.name, //this productcategory is the one comming from ProductCategoryController.php @ update function
meta_title: data.productcategory.meta_title,
meta_keywords: data.productcategory.meta_keywords,
meta_description: data.productcategory.meta_description,
status: data.productcategory.status,
});
}
}
const handleInput = (e) => {
e.persist();
setProductCategoryInput({
...productCategoryInput,
[e.target.name]: e.target.value,
});
};
async function editProductCategory(e) {
e.preventDefault();
const Formdata = {
name: productCategoryInput.name,
status: productCategoryInput.status,
meta_title: productCategoryInput.meta_title,
meta_keyword: productCategoryInput.meta_keywords,
meta_description: productCategoryInput.meta_description,
};
const res = await fetch(`/api/product_categories/${id}`, {
method: "put",
headers: {
Authorization: `Bearer ${token}`,
},
body: JSON.stringify(Formdata),
});
const data = await res.json();
if (data.errors) {
setErrors(data.errors);
} else {
navigate("/view_product_categories");
alert(data.message);
}
}
//this useEffect is calling the getProductCategory function at the top
useEffect(() => {
getProductCategory();
}, []);
return (
<>
<div className="xsm:h-[200px] md:h-[220px] w-full bg-primary">
<div className="container">
<div className="flex justify-between">
<div className="xsm:pt-[20px] md:pt-[50px]">
<h1 className="font-roboto text-secondary xsm:text-[30px] md:text-[50px] animation-delay-300 xsm:leading-8 md:leading-[50px]">
Modern Courses
</h1>
<p className="text-white text-[17px] pb-9 xsm:pt-2 md:pt-4">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Debitis reiciendis corrupti.
</p>
</div>
</div>
</div>
</div>
<div className="pt-10">
<div className="container grid grid-cols-4 gap-6 pt-4 pb-16 items-start">
<div className="lg:col-span-3 xsm:col-span-4">
<div className="flex items-center mb-3">
<Link
to="/view_product_categories"
className="flex items-center rounded border border-red-600 py-1 px-2 text-white bg-red-600 hover:bg-tertiary hover:border-tertiary"
>
<i className="fa-light fa-arrow-left mr-1"></i>
BACK
</Link>
</div>
<div className="grid xsm:grid-cols-1 md:grid-cols-3 gap-4 content-end pb-10">
<div></div>
<div className="items-center justify-center">
<div className="space-y-4">
<div className="bg-white p-3 border border-gray-200 rounded">
<h1 className="font-roboto text-[25px] text-primary font-semibold text-center capitalize mb-4">
EDIT PRODUCT CATEGORY
</h1>
<form onSubmit={editProductCategory}>
<div className="mb-2">
<label className="text-gray-600 mb-2 block">
Name
<span className="text-red-600">
*
</span>
</label>
<input
type="text"
className="block w-full border border-gray-300 px-4 py-3 text-gray-600 text-sm rounded placeholder-gray-400 focus:border-tertiary focus:ring-0"
name="name"
onChange={handleInput}
value={
productCategoryInput.name
}
/>
{errors.name && (
<p className="text-red-600">
{errors.name[0]}
</p>
)}
</div>
<div className="mb-2">
<label className="text-gray-600 block">
Status
<span className="text-red-600">
*
</span>
</label>
<input
type="checkbox"
className="text-tertiary focus:ring-0 rounded-sm cursor-pointer w-3 h-3"
name="status"
onChange={handleInput}
checked={
productCategoryInput.status
}
/>
</div>
<div className="pt-2">
<button className="w-full text-center bg-primary border border-primary text-white px-8 py-2 mb-3 font-medium rounded text-uppercase gap-2 hover:bg-transparent hover:text-primary transition">
UPDATE
</button>
</div>
</form>
</div>
</div>
</div>
<div></div>
</div>
</div>
<div className="xsm:col-span-4 md:col-span-4 lg:col-span-1 px-4 pb-6 shadow rounded overflow-hidden xsm:mt-10 md:mt-[0px]">
<div className="divide-y divide-gray-200 space-y-5">
<DashboardSidebar />
</div>
</div>
</div>
</div>
</>
);
}
Any help?
function handleChange(e) {
const key = e.target.id;
const value = e.target.value
setValues(values => ({
...values,
[key]: value,
}))
}
<input id="first_name"
type="checkbox" value={values.first_name} onChange={handleChange} />
Something like this
Please or to participate in this conversation.