React: Universal method to handle input change

Question

I am looking for smart method to handle input change in React

I have input

<input type="text" name="name" onChange={(e) => this.handleInputChange(e)} />

And function to handle input change

handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

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

But I need to change sometimes not property of state, but property of state object (or property of property of state object...) for example:

const entity = this.state.entity;
entity[name] = value;
this.setState({
   entity: entity
)}

Some ideas for multilevel?

for multi-level, you can use dot notation, name="location.lat" for example, and write some code to iterate through the levels of the .notation or use a library — TKoL
– TKoL, Commented Dec 11, 2020 at 9:27
a library like this would do it: npmjs.com/package/object-path — TKoL
– TKoL, Commented Dec 11, 2020 at 9:28

TKoL · Accepted Answer · 2020-12-11 09:33:28Z

1

Further to my comment, you might do something like this:

handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    
    this.setState(prevState => {
        const newState = Object.assign({}, prevState  );
        // https://www.npmjs.com/package/object-path
        ObjectPath.set(state, name, value);
        return state;
    });
}

using this library.

That way, when your input name is "a.b.c", it will go to the nested object state.a.b and change the c property

answered Dec 11, 2020 at 9:33

TKoL

13.9k4 gold badges49 silver badges86 bronze badges

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

Collectives™ on Stack Overflow

React: Universal method to handle input change

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related