React onClick function parameter turns into "Proxy" Object

Question

I have an array of elements at the top level of my react hierarchy that I want to set off an onClick function with a parameter with the value of the element (a string). However, when I try printing this value, a "Proxy" object is printed instead : Proxy {dispatchConfig: null, _targetInst: null, isDefaultPrevented: null, isPropagationStopped: null, _dispatchListeners: null…}

Here is the code inside my render function:

return collapseChoices.map((choice) => {
        console.log(choice)

        return (
          <div className="collapseChoice"
             onClick={(choice) => this.handleCollapse(choice)}>
             {choice}
          </div>
        );

Here is the handleCollapse function:

handleCollapse(mark){
    console.log(mark);
  }

I made sure to bind this in the constructor

  constructor(){
    super();

    this.handleCollapse = this.handleCollapse.bind(this);
  }

Answer 1

you are passing the event object into your handleCollapse method, not the choice. they way this reads is you are telling react that when the button is clicked execute the arrow function passing the event object to it which in term will call the handleCollapse method using the same event object. try doing this

onClick={this.handleCollapse.bind(this, choice)}

instead