Mapping a variable to the state in React

Question

I'm having a problem mapping a certain value to the state.For example, using this json var on my state (its an example only, doesnt need to make sense the json variable):

this.state={
 person:
            {
                nose:'',
                legs:{
                    knees:'',
                    foot:{
                        finger:'',
                        nail:''
                    }
                }
            }
   }

What I want to to is to create this 'person' on my frontend, by user input, and the send it to my backend,but Im having a problem.

Imagine that I want to change the person.nose atribute of my state variable.

The user writes the information by using this input field:

<input name={props.name} onChange={handleChange} type="text" className="form-control" />

And this is the call that I made to that same component:

       <TextInput name="nose" onChange={this.handleChange} />

When executing the handleChange method,I cant update the variable,its always empty, I have tried using on the name field on my textInput "name","this.state.person.nose" but nothing happened, its always empty.

Here is my handleChange method:

 handleChange(evt) {
    this.setState({ [evt.target.name]: evt.target.value });
}

NEW EDIT:

So, now Im having this problem.This is a more realistic json object than the first one:

{
            name: '',
            iaobjectfactory: {
                institution: '',
                parameter: [{
                    value: '',
                    classtype: ''
                }],
                name: '',
                usedefaultinstitution: '',
                methodname: ''
            },
            ieventhandlerclass: ''
        }

This is the output that my frontend should give me, but this is what the most recent solution returned me:

{
"name":"d",
"iaobjectfactory":{
    "institution":"",
    "parameter":[
        {
        "value":"",
        "classtype":""
        }
        ],
    "name":"",
    "usedefaultinstitution":"",
    "methodname":""},
"ieventhandlerclass":"d",
"institution":"d",
"methodname":"d",
"usedefaultinstitution":"d"

}

The values that should be on the iaobjectfactory are outside of it,I dont know why, I used this:

 handleChange(evt) {
    const { name, value } = evt.target;

    // use functional state
    this.setState((prevState) => ({
        // update the value in eventType object
        eventType: {
            // keep all the other key-value pairs
            ...prevState.eventType,
            // update the eventType value

            [name]: value
        }
    }))

EDIT 2:

This is the json output now.

{
 "name":"",
 "iaobjectfactory":{
 "institution":"bb",
 "parameter":[
     {"value":"",
     "classtype":""
     }],
 "name":"bb",
 "usedefaultinstitution":"bb",
 "methodname":"bb",
 "ieventhandlerclass":"aa"},
"ieventhandlerclass":""}

Problems:The first name is not reading and the ieventhandlerclass is inside the iaobjectfactory and it shouldnt

Answer 1

Problem with your code is, it will create a new variable nose in state and assign the value to that key. you can access the input value using this.state.nose.

Updating nested state is not that easy, you have to take care about all the other key-value pairs. In your case nose will be accessible by this.state.person.nose, so you need to update person.nose value not nose value.

You need to write it like this:

this.handleChange(evt) {
    const { name, value } = evt.target;

    // use functional state
    this.setState((prevState) => ({
        // update the value in person object
        person: {
            // keep all the other key-value pairs
            ...prevState.person,
            // update the person value
            [name]: value
        }
    }))
}

What it will do is, it will keep all the key-value pairs as it is and only update the person.nose value.

Update:

You are trying to update value of person.iaobjectfactory.name not person.name, so you need to keep all the key-values of person.iaobjectfactory and update only one at a time, like this:

handleChange(evt) {
  const { name, value } = evt.target;

  // use functional state
  this.setState((prevState) => ({
    // update the value in eventType object
    eventType: {

      // keep all the other key-value pairs of eventType
      ...prevState.eventType,

      // object which you want to update
      iaobjectfactory: {

        // keep all the other key-value pairs of iaobjectfactory
        ...prevState.eventType.iaobjectfactory,

        // update
        [name]: value
      }
    }
  }))
}