How can I configure my form submission in React to include only the entries that are toggled
Unanswered
Yellow croaker posted this in #help-forum
Yellow croakerOP
So when user submits form, i only want only that data from my forms that have their Switch turned on.
export default function CoverLetterBuilder({ resumes }: ResumeBuilderProps) {
const [selectedResume, setSelectedResume] = useState<ExtendedResume | null>(
null,
);
const form = useForm({
workExperience: selectedResume?.workexperiences.map(() => ({
include: false,
})),
});
function onSubmit(values) {
console.log('Testing', values); // Logs empty objects.
}
return (
<div className="items-center px-1 pt-4">
<div>
<h1 className="text-2xl font-bold">Start</h1>
<div>
<Select
onValueChange={(value) => {
const selected = resumes.find((resume) => resume.id === value);
setSelectedResume(selected || null);
}}
>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Select a resume" />
</SelectTrigger>
<SelectContent>
{resumes.map((resume) => (
<SelectItem key={resume.id} value={resume.id}>
{resume.title}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="w-2/3 space-y-6"
>
{selectedResume && (
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>Työkokemus</AccordionTrigger>
<AccordionContent>
{selectedResume.workexperiences.map(
(workExperience, index) => (
<div key={index}>
<Card>
<CardHeader>
<CardTitle></CardTitle>
</CardHeader>3 Replies
Yellow croakerOP
<FormField
control={form.control}
name={`workExperience.${index}`}
render={({ field }) => (
<FormItem>
<div>
<FormLabel>
{workExperience.company}
</FormLabel>
<FormDescription>
{workExperience.description}
</FormDescription>
</div>
<FormControl>
<Switch
checked={field.value}
value={field.value}
onCheckedChange={(checked) => {
form.setValue(
`workExperience.${index}.include`,
checked,
);
}}
/>
</FormControl>
</FormItem>
)}
/>
</Card>
</div>
),
)}
</AccordionContent>
</AccordionItem>
</Accordion>
)}
<Button type="submit">Update account</Button>
</form>
</Form>
</div>
</div>
<div>
</div>
</div>
);
}Yellow croakerOP
So as u can see from this picture. Now when moveman is selected, that data object i want.
This is what the data looks like from resumes.
[
{
"id": "loremIpsum",
"userId": "loremIpsum",
"title": "Resume",
"templateStyle": "Example1",
"personalInfo": {
"id": "loremIpsum",
"name": "Nicholassssssssss",
"address": "Budapest",
"phone": "0501251251",
"email": "nicho@gmail.com",
"resumeId": "loremIpsum"
},
"workexperiences": [
{
"id": "loremIpsum",
"position": "Koodari",
"company": "Elisa",
"description": "Olin toissa",
"startDate": null,
"endDate": null,
"resumeId": "loremIpsum"
},
{
"id": "loremIpsum",
"position": "Muuttaja",
"company": "Secon",
"description": "TAvaran viejä",
"startDate": null,
"endDate": null,
"resumeId": "loremIpsum"
}
]
},
{
"id": "loremIpsum",
"userId": "loremIpsum",
"title": "Resume2",
"templateStyle": "Example1",
"personalInfo": {
"id": "loremIpsum",
"name": "",
"address": "",
"phone": "",
"email": "",
"resumeId": "loremIpsum"
},
"workexperiences": []
},
{
"id": "loremIpsum",
"userId": "loremIpsum",
"title": "Resume",
"templateStyle": "Example1",
"personalInfo": {
"id": "loremIpsum",
"name": "",
"address": "",
"phone": "",
"email": "",
"resumeId": "loremIpsum"
},
"workexperiences": []
}
]This is what the data looks like from resumes.
Yellow croakerOP
What i did and it works somehow. Basically what is done now is that, when resume is selected from the Select list it add included variable to it. Then when Change happens in Switch we call setValue for include variable to it be true or false. Then in the onSubmit we go throught all the Workexperiences and filter out the ones that doesnt have included = true.
Not sure if this the best way but this is what i got now 🙂
Not sure if this the best way but this is what i got now 🙂
const prepareFormSection = (section) => {
return section.map((item) => ({
...item,
include: false,
}));
};
const handleSelectChange = (value) => {
const selected = resumes.find((resume) => resume.id === value);
setSelectedResume(selected || null);
if (selected) {
form.reset({
workExperience: prepareFormSection(selected.workexperiences),
educationInfo: prepareFormSection(selected.educationInfo),
});
} else {
form.reset({
workExperience: [],
educationInfo: [],
});
}
}; <FormControl>
<Switch
checked={field.value[index]}
onCheckedChange={(checked) => {
form.setValue(
`workExperience[${index}].include`,
checked,
);
}}
/>
</FormControl>