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?

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?

• javascript
• reactjs
• redux

• I'm assuming hangleChange is a typo in your question? – TimoStaudinger Commented Aug 12, 2016 at 17:59

3 Answers 3

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.

This is perfectly normal. You can access the value via event.target.value:

handleChange(event) {
    console.log(event.target.value);
}

More info in the React docs.

Not sure if it's a typing error, but you have hangleChange instead of handleChange. Anyway, onChange passes an Event-like object, value can be found in event.target.value

handleChange(event) {
    console.log(event.target.value);

Read up on React's event system