Reactjs handleChange with Changing subdata in an array

Question

There is a classic handle Change function. I can change the data in the same directory. There is no problem. but I have sub-data. I can't change them. I want to handle this as clean without typing the extra functions in handlechange. How can I do it?

My state:

 this.state = {
            formData: {
                appointedBroker: '',
                propertyInformations: {
                    rent: false,
                    property: {
                        housing: false,
                    },
                    features: {
                        rooms: ""
                    },
                    location: ""
                },
            }
        }

my handleChange Function:

 handleChange(event) {
        const { formData } = this.state;
        formData[event.target.name] = event.target.value;
        this.setState({ formData });
    }

and my inputs

        <TextField
            value={propertyInformations.features.rooms}
            onChange={(e) => this.handleChange(e)}
            id="rooms"
            name={'rooms'}
            type={'text'}
            label={t('Rooms')} />

in this case, I just changed "appointedBroker" data For example; I want to change "rooms"

Flatten your data, remove the nesting.

bertdida
– bertdida

2020-09-03 09:35:19 +00:00
Commented Sep 3, 2020 at 9:35 — bertdida
– bertdida, Commented Sep 3, 2020 at 9:35

Felix Too · Accepted Answer · 2020-09-03 09:56:51Z

2

In your handleChange function, you are directly mutating the state which goes against the React pattern. Doing this way, will make the update undetected e.g by componentDidUpdate.

The recommended way would be something along this lines:

handleChange(event) {
       this.setState(prevState => ({
          formData: {
            ...prevState.formData ,
            [prevState.formData.propertyInformations.features.rooms]: e.target.value,
          },
         }));
    }

answered Sep 3, 2020 at 9:56

Felix Too

12k5 gold badges27 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amir Hossein · Accepted Answer · 2020-09-03 10:23:54Z

1

the code in handleChange should be like this

const updatedFormData = {...this.state.formData,
   propertyInformations : {
       ...this.state.formData.propertyInformations,
       property: {
           ...this.state.formData.propertyInformations.property,
           rooms: e.target.value
}}}

this.setState({ formData: updatedFormData })

answered Sep 3, 2020 at 10:23

Amir Hossein

1315 bronze badges

Collectives™ on Stack Overflow

Reactjs handleChange with Changing subdata in an array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related