I’m trying to make a CV generator, and the input fields in the child component aren’t rendering.
The Parent Component:
import React, { useState } from 'react';
import WorkForm from './WorkForm';
export default function Work(){
const [exp, setExp] = useState({
jobArr :
[{company: "",
startDate: "",
endDate: "",
description: "",
id: Math.floor(Math.random() * 100)}],
editMode: true,
})
const handleSubmit = (e) => {
e.preventDefault();
setExp({ ...exp, editMode: false });
};
const handleEdit = (e) => {
setExp({ ...exp, editMode: true });
};
const handleChange = (e) => {
const {name, value, id} = e.target
setExp((
{editMode : true,
jobArr : exp.jobArr.map(job =>{
return job.id === id ? {...job, [name] : value} : job ;
})
}
))
}
const handleAdd = () => {
setExp({editMode : true,
jobArr : exp.jobArr.concat({company: "",
startDate: "",
endDate: "",
description: "",
id:Math.floor(Math.random() * 100)}),
})
};
const handleDelete = (e) =>{
const { id } = e.target
setExp({
editMode : true,
jobArr: exp.jobArr.filter(job => job.id !== id )
})
}
const editButton = <button onClick={handleEdit} className="edit-button">EDIT</button>;
const submitButton = <button onClick={handleSubmit} className="submit-button">SUBMIT</button>;
const addNewButton = <button onClick={handleAdd} className="add-new-button">ADD NEW</button>;
const editContent = (
<div className='edit-experience'>
{exp.jobArr.map(job => {
return <WorkForm
handleChange = {handleChange}
handleDelete = {handleDelete}
company = {exp.company}
startDate = {exp.startDate}
endDate = {exp.startDate}
description = {exp.description}
id = {exp.id}
key = {exp.id}
/>
})}
{submitButton}
</div>
)
const submittedContent = (
<div>
<h2>Work Experience</h2>
{exp.jobArr.map(job => {
return <div key = {job.id}>
<h4>{job.company.toUpperCase()} </h4> <p> {job.startDate} to {job.endDate}</p>
<p>{job.description}</p>
</div>
})}
</div>
)
return(
<>
{!exp.editMode && editButton}
{exp.editMode ? editContent : submittedContent}
{exp.editMode && addNewButton}
</>
)
}
The Child Component :
import React, { useState } from 'react';
export default function WorkForm(props){
<div>
<form onSubmit={props.handleSubmit}>
<input
name = "company"
type = "text"
value = {props.company}
placeholder = "Enter Company Name"
onChange={props.handleChange}
id = {props.id}
/>
<br/>
<input
name = "startDate"
type = "month"
value = {props.startDate}
placeholder = "Enter Starting Date"
onChange={props.handleChange}
id = {props.id}
/>
<input
name = "endDate"
type = "month"
value = {props.endDate}
placeholder = "Enter Ending Date"
onChange={props.handleChange}
id = {props.id}
/>
<br/>
<textarea
name="description"
rows="4"
cols="50"
value = {props.description}
placeholder= 'Describe your work experience'
onChange={props.handleChange}
id = {props.id}
>
</textarea>
<br/><br/>
<button onClick = {props.handle} className="delete-button">DELETE</button>
</form>
</div>
}
I’m not sure where I’m going wrong. I’m using Math.random to generate ID and using that as the keys for the list of children components, is that where I’m going wrong?