I have a state called workExp (an object) which has 6 attributes. I have a form that has 6 fields and I want to save the field values to the attteibutes of my workExp state. What I cannot figure out is what will my onchange for each input field look like?
My state:
export default class Resume extends Component {
constructor() {
super();
this.state = {
step: 1,
firstName: '',
lastName: '',
email: '',
phone: '',
address: '',
linkedIn: '',
workExp: { //this is the state I am concerned with
jobTitle: '',
city: '',
employer: '',
startDate:'',
endDate: '',
responsibilities: '',
id: ''
},
workExpData: [],
}
}
This is my form:
<form>
<input type="text" className="form-control" id="jobtitle" aria-describedby="emailHelp" value=
{values.workExp.jobTitle}/>
<input type="text" className="form-control" id="city" aria-describedby="emailHelp" value=
{values.workExp.city}}/>
<input type="text" className="form-control" id="employer" value={values.workExp.employer} />
<input type="text" className="form-control" id="startdate" value={values.workExp.startDate} />
<input type="text" className="form-control" id="enddate" value={values.workExp.endDate}/>
<textarea className="form-control" id="r&r" rows="3" value={values.workExp.responsibilities}></textarea>
</form>
I am fairly new to react so any help would be really appreciated. Cheers!
Use the spread operator and override the property as needed:
function onChangeWorkExpXXX(e) {
this.setState({
workExp: {
...workExp,
XXX: e.target.value,
},
});
}
Where XXX could be something like the employer or endDate.
export default class Resume extends Component {
constructor() {
super();
this.state = {
step: 1,
firstName: '',
lastName: '',
email: '',
phone: '',
address: '',
linkedIn: '',
workExp: { //this is the state I am concerned with
jobTitle: '',
city: '',
employer: '',
startDate:'',
endDate: '',
responsibilities: '',
id: ''
},
workExpData: [],
}
}
<form>
<input type="text" className="form-control" id="jobtitle" aria-describedby="emailHelp" value=
{values.workExp.jobTitle} onChange={e=>{
let temp = {...this.state}
temp.workExp.jobTitle = e.target.value ;
this.setState({...temp})
}} />
<input type="text" className="form-control" id="city" aria-describedby="emailHelp" value=
{values.workExp.city}} onChange={e=>{
let temp = {...this.state}
temp.workExp.city = e.target.value ;
this.setState({...temp})
}} />
<input type="text" className="form-control" id="employer" value={values.workExp.employer} onChange={e=>{
let temp = {...this.state}
temp.workExp.employer = e.target.value ;
this.setState({...temp})
}} />
<input type="text" className="form-control" id="startdate" value={values.workExp.startDate} onChange={e=>{
let temp = {...this.state}
temp.workExp.startDate = e.target.value ;
this.setState({...temp})
}} />
<input type="text" className="form-control" id="enddate" value={values.workExp.endDate}. onChange={e=>{
let temp = {...this.state}
temp.workExp.endDate = e.target.value ;
this.setState({...temp})
}} />
<textarea className="form-control" id="r&r" rows="3" value={values.workExp.responsibilities} onChange={e=>{
let temp = {...this.state}
temp.workExp.responsibilities = e.target.value ;
this.setState({...temp})
}} ></textarea>
</form>