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!
Advertisement
Answer
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>