How to add input entries to a list
I'm building a resume builder project with react and I feel a bit stuck on how to add to a list (the resume view) the entries I type into the inputs. I made it work with this code:
function EducationField({ setEducationData }: EducationFieldProp) {
const [newEducationData, setNewEducationData] = useState({
id: uuidv4(),
schoolName: '',
title: '',
location: '',
startDate: '',
endDate: '',
});
function handleAddEducation(e: ChangeEvent<HTMLInputElement>) {
const { name, value } = e.target;
setNewEducationData((prev) => ({ ...prev, [name]: value }));
}
function addToList() {
setEducationData((prev) => [...prev, newEducationData]);
setNewEducationData({
id: uuidv4(),
schoolName: '',
title: '',
location: '',
startDate: '',
endDate: '',
});
}
return (
<Form>
<div>
<Input
label="School"
name="schoolName"
text="Insert name"
value={newEducationData.schoolName}
onChange={handleAddEducation}
/>
<Input
label="Title"
name="title"
text="Insert title"
value={newEducationData.title}
onChange={handleAddEducation}
/>
<Input
label="Location"
name="location"
text="Insert location"
value={newEducationData.location}
onChange={handleAddEducation}
/>
<Input
label="Start Date"
name="startDate"
text="Insert start date"
value={newEducationData.startDate}
onChange={handleAddEducation}
/>
<Input
label="End Date"
name="endDate"
text="Insert end date"
value={newEducationData.endDate}
onChange={handleAddEducation}
/>
</div>
<AddButton onClick={addToList} text="Education" />
</Form>
);
}
export default EducationField;`
1 Reply
but I'm not really satisfied: if I change my useState into an array of object, those entries don't get affected by the e.target.value. What I would like to achieve is that I would like to show a brief summary of the entries I added I tried to create another handleChange function that could only change the useState entries and add it to the onChange along the other function, but obviously it doesn't work!
I would like to understand how to do it, so even if you have to remind me to some documentations it would be nice, thank you so much at the top of the form field so I can either modify or delete it.