Updating react nested state properties

This is spot on. I am new to React and I tried doing it like this and it also seems to work:

  handleChange = (event) => {
    const target = event.target;

    if (target.id === "symbol") {
      this.setState({
        input: {
          symbol: target.value,
          amountHeld: this.state.input.amountHeld
        }
      });
    } else {
      this.setState({
        input: {
          symbol: this.state.input.symbol,
          amountHeld: target.value,
        }
      });
    }

    console.log(this.state);
  }

• this is my initialState

const initialStateInput = {
cabeceraFamilia: {
familia: '',
direccion: '',
telefonos: '',
email: ''
},
motivoConsulta: '',
fechaHora: '',
corresponsables: [],
}

• The hook or you can replace it with de state class

const [infoAgendamiento, setInfoAgendamiento] = useState(initialStateInput);

• The method for handleChange

const actualizarState = e => {
const nameObjects = e.target.name.split('.');
const newState = setStateNested(infoAgendamiento, nameObjects, e.target.value);
setInfoAgendamiento({...newState});
};

• Method for set state with nested states

const setStateNested = (state, nameObjects, value) => {
let i = 0;
let operativeState = state;
if(nameObjects.length > 1){
for (i = 0; i < nameObjects.length - 1; i++) {
operativeState = operativeState[nameObjects[i]];
}
}
operativeState[nameObjects[i]] = value;
return state;
}

• Finally this is the input that i use

< input type="text" className="form-control" name="cabeceraFamilia.direccion" placeholder="Dirección" defaultValue={infoAgendamiento.cabeceraFamilia.direccion} onChange={actualizarState} / >

Sorry, my English is not the best but i wanted to share my solution ... your article helped me for it

I've been searching high and low for a solution to this issue and your article hits the nail on the head. I'll also stray from nested state for performance reasons as my app has dozens of forms and dozens of fields per form.

It does seem a bit awkward that state would not support nested state more easily. This should seriously be a consideration in future releases.

React hooks made state management a lot easier, however handling of updates for arrays, objects and nested data still requires a bit of manipulation with data. Check github.com/avkonst/react-use-state-x which makes array, object, nested data state and global state management simple and efficient using React hooks. Disclaimer: I am an author of the lib.

What about the usage of the state argument given in the setState callback?
As is explained in this article in the React docs you should avoid using the rendered state while updating state. Instead, the argument from the setState callback should be used like so:

this.setState(state => {
  ...state
})

However doing this with a nested state using variables that are outside of the scope is impossible:

handleEvent = (event) => {
  this.setState(state => {
    ...state,
    field: event.target.value  // event is undefined
  });
}

Any ideas how to solve this?

EDIT: meanwhile I will be using a flat state structure in order to adhere to the component update cycle. I am only using static fields for my state so far so it isn't too bad i guess.
Grouping fields in my component will now look something like this:

state = {
  field1: "",
  field2: 0,
  field3: ""
}

getFieldGroup = () => {
  let {field1, field2} = this.state;
}

Dealing with nested state is not good, but we constantly need it.
I always follow the guidelines and update the whole component state instead of only updating one property. immutability is important because you make sure that your code will never break. If something changes when it shouldn't, it's easier to detect when always updating everything.

Literally just ran into this today. Think I'll just make my life easier and not do nested state.