React setState nested object callback

Question

I have a parent component:

class ParentComponent extends React.Component {

    constructor() {
            super();
            this.state = {
                filterInputs: {
                    priceMin: "",
                    priceMax: ""
                   // and many other similar nested fields
                }
            } 
            this.handleChange = this.handleChange.bind(this)
        }



      handleChange(e) {
        this.setState((prevState) => ({
            filterInputs: {
                ...prevState.filterInputs,
                [e.target.name]: e.target.value
            }
        }))
    } 

    //render method omitted     
 }

I also have a deeper nested child component:

    class GrandchildComponent extends React.Component {

        handleChange = e => {
            this.props.handleChange && this.props.handleChange(e)
        };

        render() {
            return (
                <div>
                            <InputText id="priceMin"
                                       value={this.props.filterInputs.priceMin}
                                       name="priceMin"
                                       onChange={this.handleChange}
                            />
                            <InputText id="priceMax"
                                       value={this.props.filterInputs.priceMax}
                                       name="priceMax"
                                       onChange={this.handleChange}
                            />

                            //And many other similar input fields
                </div>
            )
        }
    }

(I tried to keep the code as minimal as possible)

I have a situation where the user is filling in some input fields and I am trying to send the inputs up to my parent component using a callback method handleChange. I am getting an error: TypeError: Cannot read property 'name' of null, and the console says: Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property ``target`` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().

The problem seems to be in my handleChange method, but I am not sure how to fix it.

Does this answer your question? [What is event pooling in react?](https://stackoverflow.com/questions/36114196/what-is-event-pooling-in-react) — Emile Bergeron, Apr 16 '20 at 18:34
The Event object is reused in React, so the value property of the Event object is subject to change. Get the w/e you need from the Event object as soon as you can, and just pass the data upstream to w/e is using it. Don't pass the event itself. Get what you need from it, and pass that up. — TJBlackman, Apr 16 '20 at 18:44

score 1 · Accepted Answer · answered Apr 16 '20 at 18:53

1

just use

this.setState({
  filterInputs: {
    ...this.state.filterInputs,
    [e.target.id]: e.target.value,
  }
});

answered Apr 16 '20 at 18:53

Nick Bond

171
8

React setState nested object callback

1 Answers1