I have a class and I want to update properties the personalInformation Object in the state without affecting other unspecified properties.

class Main extends Component
{
    constructor()
    {
        super();

        this.state = {
            personalInformation: {
                firstName: '',
                lastName: '',
                title: '',
                email: '',
                address: '',
                phone: ''
            },
            experience:[
                {
                    position: '',
                    company: '',
                    startDate: '',
                    endDate: '',
                    description: ''
                },
            ]
            
        };
    };

    // This function is meant to update the state
    updatePersonalInfoState = (e) => {
        const name = e.target.name;
        const value = e.target.value;
        this.setState({
            ...this.state.personalInformation,
            [name]: value,
        });
    };


    render()
    {
         const personalInfo = this.state.personalInformation;
        // This renders the form that takes user input
        return(
            <form>
               <input type='text' 
                name='firstName' 
                id='firstname' 
                value={personalInfo.firstName}
                onChange={this.updatePersonalInfoState}
            />
            <label htmlFor='lastname'> Last Name</label>
            <input type='text' 
                name='lastName' 
                id='lastname' 
                value={personalInfo.lastName}
                onChange={this.updatePersonalInfoState}
            />
            <label htmlFor='job-title'> Title</label>
            <input 
                type='text' 
                name='job-title' 
                id='job-title' 
                value={personalInfo.title}
                onChange={this.updatePersonalInfoState}
            />
            <label htmlFor='email'> Email</label>
            <input 
                type='email' 
                name='email' 
                id='email' 
                value={personalInfo.email}
                onChange={this.updatePersonalInfoState}
            />
            <label htmlFor='address'> Address</label>
            <input 
                type='text' 
                name='address' 
                id='address' 
                value={personalInfo.address}
                onChange={this.updatePersonalInfoState}
            />
            <label htmlFor='phone'> Tel</label>
            <input 
                type='tel' 
                name='phone' 
                id='phone'
                value={personalInfo.phone}
                onChange={this.updatePersonalInfoState}
            />
            </form>
        )
    }
}

export default Main;

The issue is when I try to type into the input, the state doesn't change hence, the input doesn't get updated.

I arrived at the current version of the updateInfoState method because the previous version:

updatePersonalInfoState = (e) => {
        const name = e.target.name;
        const value = e.target.value;
        this.setState({
            personalInformation: {
               [name]: value,
            }
        });
    };

returned a state with only one property hence it overwrote the personalInformation Object. After I rewrote the function to the current one, the new issue (state not updating) arose.

edit: I included a console.log() in my local code to see if the update method was being called and it is but the state refuses to update.

CodePudding user response：

I think the problem is from not spreading the previous state

  this.setState({
            personalInformation: {
               ...this.state.personalInformation,
               [name]: value,
            }
        });

in this way, you keep others input's state values and override chaning one

CodePudding user response：

You need to make minor changes in the code

You are using

<input 
                type='tel' 
                name='phone' 
                id='phone'
                value={personalInfo.phone}
                onChange={updatePersonalInfo} // this method need to be bind to your class
            />

Which is like

class Main extends Component {
  constructor() {
    // Rest of the code
    this.updatePersonalInfoState = this.updatePersonalInfoState.bind(this)
  };

  // This function is meant to update the state
  updatePersonalInfoState = (e) => {
    // Active code
  };


  render() {
    const personalInfo = this.state.personalInformation;
    // This renders the form that takes user input
    return ( <
      form >
      <
      input type = 'text'
      name = 'firstName'
      id = 'firstname'
      value = {
        personalInfo.firstName
      }
      onChange = {
        this.updatePersonalInfoState
      } // <= this is how you are supposed to assign
      />
      ...Code <
      /form>
    )
  }
}

export default Main;