Please I am developing an application with React JS, Inertia and Laravel that require users to submit their academic qualifications. I want the user to be able to add additional form row for more qualifications or remove as the case may be and this is working already. Also, I want the form to be submitted as an array of values and as well validate the values in the array when the form is finally submitted to laravel controller. I have only done this before with traditional php/html but couldn't figure out how best to submit the form as array in React/Inertia
I want to store all the qualifications as array in data.qualifications with keys that correspond to the index of the map. The same for data.institution, data.course and data.date_of_graduation
Below is the code
const StaffEducation = () => {
const user = usePage().props.auth.user;
const { data, setData, post, processing, errors } = useForm<{
staffid: string;
qualification: string[];
institution: string[];
course: string[];
date_of_graduation: string[];
}>({
staffid: user.username,
qualification: [],
institution: [],
course: [],
date_of_graduation: [],
});
//Default no of forms provided for qualifications
const [educations, setEducations] = useState<number[]>([1, 2]);
const educationList = (education?: number) => {
//pass an element from the list to delete
if (education) {
// educations.splice(educations.indexOf(education), 1);
setEducations([...educations.filter((edu) => edu !== education)]);
} else {
setEducations([
...educations,
educations[educations.length - 1] + 1,
]);
}
};
// console.log(data.qualification);
// const handleSchool = (e: React.ChangeEvent<HTMLInputElement>) =>
// console.log(e);
return (
<>
<Head title="Education and Qualifications" />
<section className="section">
<div className="row">
<div className="col-lg-12">
<div className="card">
<div className="card-body">
<h5 className="card-title text-center">
Education and Qualifications
</h5>
<form>
<table className="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">
Qualification
</th>
<th scope="col">
University/College
</th>
<th scope="col">
Course/Programme
</th>
<th scope="col">Date of Graduation</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{educations &&
educations.map(
(
education: number,
id: number
) => (
<tr key={id}>
<th scope="row">
{id + 1}
</th>
<td>
<div className="col-md-12">
<input
type="text"
className="form-control"
placeholder="e.g B.Sc"
value={
data
.qualification[
id
]
}
name="qualification[]"
onChange={(
e
) =>
setData(
"qualification",
data.qualification.splice(
id,
1,
e
.target
.value
)
)
}
/>
</div>
</td>
<td>
<div className="col-md-12">
<input
type="text"
className="form-control"
placeholder="University/Institution"
name="institution[]"
/>
</div>
</td>
<td>
<div className="col-md-12">
<input
type="text"
className="form-control"
placeholder="Course"
name="course[]"
/>
</div>
</td>
<td>
<div className="col-md-12">
<input
type="date"
className="form-control"
name="date_of_graduation[]"
/>
</div>
</td>
<td>
{educations[0] ===
education ? (
<button
type="button"
className="btn btn-primary "
onClick={() =>
educationList()
}
>
Add
</button>
) : (
<button
type="button"
className="btn btn-danger "
onClick={() =>
educationList(
education
)
}
>
Remove
</button>
)}
</td>
</tr>
)
)}
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
</section>
</>
);
};
export default StaffEducation;
I also tried the below code in setting the value, //setData("qualification", data.qualification.map((q,index) =>index === id ? e.target.value : q) but this only work if I set default values for the qualification array in the useForm hook while the data.qualification.splice(id,1,e.target.value) does not work in setting the value.
I need advise on how best to approach this. Thank you.
Update
I have to use setData("qualification",data.qualification.map((q,index) =>index === id ? e.target.value : q)) for the onChange event instead of onChange={(e) => data.qualification.splice(id, 1, e.target.value)} as the splice method did not even allow typing in the fieds. Also I change the method to add and remove form row to the below
const removeEducation = (id: number) => {
//pass an element index from the list to delete
setEducations(educations.filter((_, index) => index !== id));
data.qualification.splice(id, 1);
data.institution.splice(id, 1);
data.course.splice(id, 1);
data.date_of_graduation.splice(id, 1);
};
const addEducation = () => {
setEducations([
...educations,
educations[educations.length - 1] + 1,
]);
data.qualification.push("");
data.institution.push("");
data.course.push("");
data.date_of_graduation.push("");
};
Default value was also set like qualification: educations.map((edu) => "") in the useForm hook.
Thank you for your support
Please I am developing an application with React JS, Inertia and Laravel that require users to submit their academic qualifications. I want the user to be able to add additional form row for more qualifications or remove as the case may be and this is working already. Also, I want the form to be submitted as an array of values and as well validate the values in the array when the form is finally submitted to laravel controller. I have only done this before with traditional php/html but couldn't figure out how best to submit the form as array in React/Inertia
I want to store all the qualifications as array in data.qualifications with keys that correspond to the index of the map. The same for data.institution, data.course and data.date_of_graduation
Below is the code
const StaffEducation = () => {
const user = usePage().props.auth.user;
const { data, setData, post, processing, errors } = useForm<{
staffid: string;
qualification: string[];
institution: string[];
course: string[];
date_of_graduation: string[];
}>({
staffid: user.username,
qualification: [],
institution: [],
course: [],
date_of_graduation: [],
});
//Default no of forms provided for qualifications
const [educations, setEducations] = useState<number[]>([1, 2]);
const educationList = (education?: number) => {
//pass an element from the list to delete
if (education) {
// educations.splice(educations.indexOf(education), 1);
setEducations([...educations.filter((edu) => edu !== education)]);
} else {
setEducations([
...educations,
educations[educations.length - 1] + 1,
]);
}
};
// console.log(data.qualification);
// const handleSchool = (e: React.ChangeEvent<HTMLInputElement>) =>
// console.log(e);
return (
<>
<Head title="Education and Qualifications" />
<section className="section">
<div className="row">
<div className="col-lg-12">
<div className="card">
<div className="card-body">
<h5 className="card-title text-center">
Education and Qualifications
</h5>
<form>
<table className="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">
Qualification
</th>
<th scope="col">
University/College
</th>
<th scope="col">
Course/Programme
</th>
<th scope="col">Date of Graduation</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{educations &&
educations.map(
(
education: number,
id: number
) => (
<tr key={id}>
<th scope="row">
{id + 1}
</th>
<td>
<div className="col-md-12">
<input
type="text"
className="form-control"
placeholder="e.g B.Sc"
value={
data
.qualification[
id
]
}
name="qualification[]"
onChange={(
e
) =>
setData(
"qualification",
data.qualification.splice(
id,
1,
e
.target
.value
)
)
}
/>
</div>
</td>
<td>
<div className="col-md-12">
<input
type="text"
className="form-control"
placeholder="University/Institution"
name="institution[]"
/>
</div>
</td>
<td>
<div className="col-md-12">
<input
type="text"
className="form-control"
placeholder="Course"
name="course[]"
/>
</div>
</td>
<td>
<div className="col-md-12">
<input
type="date"
className="form-control"
name="date_of_graduation[]"
/>
</div>
</td>
<td>
{educations[0] ===
education ? (
<button
type="button"
className="btn btn-primary "
onClick={() =>
educationList()
}
>
Add
</button>
) : (
<button
type="button"
className="btn btn-danger "
onClick={() =>
educationList(
education
)
}
>
Remove
</button>
)}
</td>
</tr>
)
)}
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
</section>
</>
);
};
export default StaffEducation;
I also tried the below code in setting the value, //setData("qualification", data.qualification.map((q,index) =>index === id ? e.target.value : q) but this only work if I set default values for the qualification array in the useForm hook while the data.qualification.splice(id,1,e.target.value) does not work in setting the value.
I need advise on how best to approach this. Thank you.
Update
I have to use setData("qualification",data.qualification.map((q,index) =>index === id ? e.target.value : q)) for the onChange event instead of onChange={(e) => data.qualification.splice(id, 1, e.target.value)} as the splice method did not even allow typing in the fieds. Also I change the method to add and remove form row to the below
const removeEducation = (id: number) => {
//pass an element index from the list to delete
setEducations(educations.filter((_, index) => index !== id));
data.qualification.splice(id, 1);
data.institution.splice(id, 1);
data.course.splice(id, 1);
data.date_of_graduation.splice(id, 1);
};
const addEducation = () => {
setEducations([
...educations,
educations[educations.length - 1] + 1,
]);
data.qualification.push("");
data.institution.push("");
data.course.push("");
data.date_of_graduation.push("");
};
Default value was also set like qualification: educations.map((edu) => "") in the useForm hook.
Thank you for your support
1 Answer
Reset to default 0You should set the default value of data based of the educations you have, something like:
const [educations, setEducations] = useState<number[]>([1, 2]);
const { data, setData, post, processing, errors } = useForm<{
staffid: string;
qualification: string[];
institution: string[];
course: string[];
date_of_graduation: string[];
}>({
staffid: user.username,
qualification: educations.map(edu => ""),
institution: educations.map(edu => ""),
course: educations.map(edu => ""),
date_of_graduation: educations.map(edu => ""),
});
Using this code you should have qualification, institution, course, date_of_graduation as an array with count of your educations.
Also there is not need for setData function when qualification is changed. Array splice changes the array in place. It should be like:
onChange={(e) => data.qualification.splice(id, 1, e.target.value)}
Read the array splice docs:
https://developer.mozilla./en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice