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
}
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.
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.
