Why is console log returning a Proxy Object?

Question

So this is a very weird occurrence, and I'm not quite sure what is going on within my code. Essentially the user inputs the Customer ID / Lead ID and can search for that customer's information from this input. For whatever reason when I call my method GetLeadInfo(leadID) and console log the value of leadID, I get this Proxy Object with all sorts of values. I was expecting to just get an integer back, but instead got that. I've never seen this before and have no idea why this method is retrieving this weird value.

Here is myfile.js

import React from 'react';

export default Class MyFile extends React.Component{
 constructor(props){
  super(props);

  this.state = {
   LeadID: "",
   CustomerFirstName: "",
   CustomerLastName: "",
   CustomerAddress: "",
   CustomerState: "",
   CustomerCity: "",
   CustomerZip: "",
   CustomerEmail: "",
   BusinessName: "",
   BusinessAddress: "",
  }
 }

GetLeadInfo(leadID){
console.log(leadID);
        let firstName = "";
        let lastName = "";
        let customerID = "";
        let customerAddress = "";
        let customerCity = ""
        let customerState = "";
        let customerZip = "";
        let customerEmail = "";

        $.get('/crm/leads/' + leadID).then(response => {

            firstName = response.extended_info.fields_by_name["Customer First Name"];
            lastName = response.extended_info.fields_by_name["Customer Last Name"];
            customerID = response.extended_info.fields_by_name["Customer Number"];
            customerAddress = response.extended_info.fields_by_name["Street"];
            customerCity = response.extended_info.fields_by_name["City"];
            customerState = response.extended_info.fields_by_name["State"];
            customerZip = response.extended_info.fields_by_name["Zip"];
            customerEmail = response.extended_info.fields_by_name["Email"];

            if(this.state.searchCondition === "StoresWithinCustomer"){
                this.SaveCoordsForCustomer(response);
            }

            this.setState({CustomerInfo: response,
                            CustomerID: customerID.trim(), 
                            CustomerName: firstName + " " + lastName,
                            CustomerAddress: customerAddress,
                            CustomerCity: customerCity,
                            CustomerState: customerState,
                            CustomerZip: customerZip,
                            CustomerEmail: customerEmail,              
            }, function (){
                this.getLastAd2();  // needed callback to retrieve info after setState
            });

            //console.log(response);
        }).catch(error =>{
            console.log("Error: " + error);
        });

}

LeadIDHandler(e){
        let lead = e.target.value;
        this.setState({LeadID: lead});
    }

render(){
return(
<div className="MainContainer">
 <div className="Content">
 <label style={{display: 'block', marginBottom: '5px'}}>Search by Lead ID</label> 
                                <input type="text" style={{width: '10%'}} id="LeadID" onChange={this.LeadIDHandler.bind(this)}></input> 
                                <button onClick={this.GetLeadInfo.bind(this.state.LeadID)}>Search</button> 

                                <label style={{display: 'block', marginBottom: '5px'}}>Customer Number (if applicable)</label> 
                                <input type="text" style={{width: '10%'}} id="CustomerNumber" value={this.state.CustomerID}></input> 

                                <label style={{display: 'block', marginBottom: '5px'}}>Customer Name</label>                                                    
                                <input type="text" style={{width: '10%'}} id="CustomerName" onChange={this.CustomerInfoHandler.bind(this)} style={{display: 'block'}} value={this.state.CustomerName}></input>  

                                <label style={{display: 'block', marginBottom: '5px'}}>Business Name</label>                                                    
                                <input type="text" style={{width: '10%'}} id="BusinessName" onChange={this.CustomerInfoHandler.bind(this)} style={{display: 'block'}} value={this.state.BusinessName}></input>

                                <label style={{display: 'block', marginBottom: '5px'}}>Business Address</label>                                                    
                                <input type="text" style={{width: '10%'}} id="BusinessAddress" onChange={this.CustomerInfoHandler.bind(this)} style={{display: 'block'}} value={this.state.BusinessAddress}></input>

                                <label style={{display: 'block', marginBottom: '5px'}}>City</label>                                                    
                                <input type="text" style={{width: '10%'}} id="CustomerCity" onChange={this.CustomerInfoHandler.bind(this)} style={{display: 'block'}} value={this.state.CustomerCity}></input>

                                <label style={{display: 'block', marginBottom: '5px'}}>State</label>                                                    
                                <input type="text" style={{width: '10%'}} id="CustomerState" onChange={this.CustomerInfoHandler.bind(this)} style={{display: 'block'}} value={this.state.CustomerState}></input>

                                <label style={{display: 'block', marginBottom: '5px'}}>Zip</label>                                                    
                                <input type="text" style={{width: '10%'}} id="CustomerZip" onChange={this.CustomerInfoHandler.bind(this)} style={{display: 'block'}} value={this.state.CustomerZip}></input>

 </div>
</div>
);
}

}

If anyone has any idea why this might be happening, I would appreciate it! Thanks.

Answer 1

The first argument passed to .bind() is not the first argument that the function in object will get when it is called.

So with this code:

this.GetLeadInfo.bind(this.state.LeadID)

the function's this object is bound to LeadID, and the function will be called without explicit arguments from your side -- React will add it's own argument, including an event object, which is what you see in the console.

You should do:

this.GetLeadInfo.bind(this, this.state.LeadID)