can not update state with immutability helper

Question

i have object in my state and nested object inside parent object, and updating objects in state may cause state mutating and lots of answers adviced to use immutability-helpers, (react-addons-update) this is my state:

    this.state = {
        room: {
            isOpen: false,
            index: '',
            roomNumber: '',
            reserved: '',
            isLux: null,
            _id: '',
            reserver:{
               name: '',
               surname: '',
               national_id: '',
               customer_number: '',
               staying_til: '',
               _id: ''
            }

        }
    }

and this is how update room properties:

roomChangeEvent(e){
       update(this.state, {
            room: {
               [e.target.name]: {$set: e.target.value}

            }
       })
}

and reserver properties

changeEvent(e){
        update(this.state, {
            room: {
                reserver: {
                  [e.target.name]: {$set: e.target.value}
                }

            }
       })
}

but it is not updating state even though it is getting value and name. what is problem?

Answer 1

I would say, use immer-js https://immerjs.github.io/immer/docs/produce

This is very simple and no api to learn like in case of immutability-helpers, $push, $set etc.

Here is example from their page

import produce from "immer"

const baseState = [
    {
        todo: "Learn typescript",
        done: true
    },
    {
        todo: "Try immer",
        done: false
    }
]

const nextState = produce(baseState, draftState => {
    draftState.push({todo: "Tweet about it"})
    draftState[1].done = true
})

In your scenario

import produce from "immer"

changeEvent(e){
   this.setState(produce(draftState => {
      draftState.room.reserver[e.target.name] = e.target.value;
   }););
}