Accessing onChange event from child component (React/Redux)

Question

I have a container component that's rendering a child component with an input. I would like to have access to the child component's value during the onChange event, but I am getting a "Proxy" object instead of the input value.

Container Component

...

class InputContainer extends React.Component {

    handleChange = (val) => {
        console.log(val);

        // => Proxy { [[Handler]]: Object, [[Target]]: SyntheticEvent, [[isRevoked]]: false }
    }

    render() {
        return <Input handleChange={this.handleChange} {...this.props} />;
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(InputContainer);

Input Component

export default function Input(props) {
    return <input onChange={props.handleChange} />;
}

Why am I getting this "Proxy" object and how can I get the input's value from InputContainer?

Answer 1

What you are seeing is an instance of React's SyntheticEvent. Note that everything will work the same, i.e this should work:

console.log('ev -> ', ev.target.value);

However, if you want to see the values in the Developer tools try:

console.log('ev -> ', ev.nativeEvent);

Source: https://facebook.github.io/react/docs/events.html

Quote:

Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers. If you find that you need the underlying browser event for some reason, simply use the nativeEvent attribute to get it.