React function parameter is a Proxy?

Question

I have a function in my stateful React component and I'm getting a Proxy instead of what I actually expect in the function's parameters.

What is going on here? I'd expect to see hello world in my log, but instead I see this:

what is this? Proxy {dispatchConfig: Object, _targetInst: Constructor, nativeEvent: Object, type: undefined, target: 196…} [[Handler]] : Object [[Target]] : ResponderSyntheticEvent [[IsRevoked]] : false

class MyComponent extends Component {

state={}

toggleModal = (A) => {
    console.log('what is this?', A)
    this.setState((prevState, props) => {
      return { openShippingModal: !prevState.openShippingModal };
    });
   }

anotherFunctionInMyComponent = selection => {
    ///do stuff
    this.toggleModal('hello world');
  };

componentDidMount = () => {
 /* do sutff */
}  

render(){
 //return stuff
}

Answer 1

The answer: I was passing toggleModal not only to anotherFunctionInMyComponent but to an onPress prop as well causing it to be a synthetic event. I forgot about the onPress prop, so the console log was actually coming from there and not anotherFunctionInMyComponent. So after realizing that I was able to pass parameters to the function as expected from onPress.

Answer 2

React uses a "Synthetic Events" system to smoother over the differences between event handling in different browsers. You can generally treat that parameter is if it were a standard browser event object, ie, using A.target.value or something similar.

For more info, see the React docs on Handling Events and the SyntheticEvent API reference.

Now, looking at your example, I am a bit confused what's going on. Based on that snippet, yes, I'd expect that A would be the string "hello world". Might be able to help more if you can show more code.