Stored data is not retrieved correctly when editing/updating form

The following code are written in react.js / inertia.js. Currently, I can create a new item and all the data is stored in the database. However, when I edit/update the form, the data that is in the database is not reflected in my checkbox component. If the value in the database is 1, the checkbox supposed to be ticked and when it is 0, it supposed to be unticked. When I update it manually though it is updating the data correctly. Only that if a user wants to view what is the state of an item whether it is ticked or unticked, it will always remained unticked. The following are the related code :

const { data, setData, post, put, errors, reset } = useForm({
        module_id: modalData?.pengurusan_menus_module_id ?? "",
        menu_id: modalData?.id ?? "",
        title: modalData?.title ?? "",
        url: modalData?.href ?? "",
        icon: modalData?.icon ?? "",
        is_active: modalData?.is_active ?? "",
    });

const formik = useFormik({
        initialValues: {
            module_id: action === "create" ? "" : `${data.pengurusan_menus_module_id}`,
            menu_id: action === "create" ? "" : `${data.menu_id}`,
            title: action === "create" ? "" : `${data.title}`,
            url: action === "create" ? "" : `${data.url}`,
            icon: action === "create" ? "" : `${data.icon}`,
            is_active: action === "create" ? "" : `${data.is_active}`,
        },
      ....
})

<div className={"col-span-2"}>
                    <InputLabel
                        value={"Status"}
                        className={"mb-2 font-bold text-base"}
                    />
                    {/* <Checkbox
                        onChange={(e) =>
                            handleSelection("is_active", e.target.checked)
                        }
                        checked={data.is_active}
                    ></Checkbox> */}
                    <Checkbox
                        id={"is_active"}
                        name={"is_active"}  
                        value={data.is_active}
                        handleChange={(e) => {
                            const isChecked = e.target.checked;
                            setData("is_active", isChecked ? 1 : 0 ); // Set the value of the 'icon' field
                            formik.setFieldValue("is_active", isChecked);
                            
                        }}
                        checked={formik.values.is_active}
                    />
</div>

The checkbox main component, which is imported to be used in the code above,

import React from "react";

export default function Checkbox({ id, name, value, handleChange, checked }) {
    return (
        <input
            type="checkbox"
            id={id}
            name={name}
            value={value}
            className="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
            onChange={(e) => handleChange(e)}
            checked={checked}
        />
    );
}

How can I fix this ?

LaryAI

2 years ago

Level 58

The issue seems to be with how you're setting the checked property of the checkbox. The checked property of a checkbox should be a boolean, but in your code, you're setting it to a string value.

In your useFormik hook, you're setting is_active to a string value, when it should be a boolean. You can convert the string to a boolean using JSON.parse().

Here's how you can fix it:

const formik = useFormik({
    initialValues: {
        module_id: action === "create" ? "" : `${data.pengurusan_menus_module_id}`,
        menu_id: action === "create" ? "" : `${data.menu_id}`,
        title: action === "create" ? "" : `${data.title}`,
        url: action === "create" ? "" : `${data.url}`,
        icon: action === "create" ? "" : `${data.icon}`,
        is_active: action === "create" ? false : JSON.parse(data.is_active),
    },
    ...
})

In the above code, JSON.parse(data.is_active) will convert the string "true" to true and "false" to false.

Also, in your Checkbox component, you're passing value prop which is not necessary for checkbox input. You can remove that.

export default function Checkbox({ id, name, handleChange, checked }) {
    return (
        <input
            type="checkbox"
            id={id}
            name={name}
            className="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
            onChange={(e) => handleChange(e)}
            checked={checked}
        />
    );
}

Now, your checkbox should correctly reflect the is_active state from your database.

jabrij93

2 years ago

Level 2

The answer from larry didn't solve the question. can anyone help ?

Update : even on this part,

handleChange={(e) => {
                            const isChecked = e.target.checked;
                            setData("is_active", isChecked ? 1 : 0 ); // Set the value of the 'icon' field
                            formik.setFieldValue("is_active", isChecked);
                            }}

if I set setData("is_active", isChecked); , the solution is still the same.

Please help me anyone

1 like

Please or to participate in this conversation.