cannot determine my onChange functions for my input fields

Question

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!

Answer 1

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>

Answer 2

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.