React event handler with parameter in render function : Performance issue?

All these functions are methods of a class, say App class. and I have a component(s) in render function :

{playerList.map((item,index) =>(
<DropdownItem onClick={(e) => this.setRequestParam(item,'Offense', 'detailed')}
               key = {index}>{item}
</DropdownItem>
)



{targetList.map((item,index) =>(
<DropdownItem onClick={(e) => this.setRequestParam(item,'Defense', 'summary')}
               key = {index}>{item}
</DropdownItem>
)

and setRequestParam doing :

setRequestParam = (value, paramName, desc) => {
        this.setState({
          params : {
              ...this.state.params,
              [paramName] : value
            }
          }, function setStateCallback(){          
             console.log(this.state.params)

             this.getStatsData(desc)
          }
        ) 
    }

and getStatsData(desc) doing:

getStatsData = async (desc) => {

      if (desc === 'detailed'){ .. does something }
      else if (desc === 'summary'){ .. does something }
      else if (desc === 'a different keyword'){... does something}
      ...
}

So the goal here is to make a POST request on DropdownItem onclick, and sending multiple parameters via event handler is currently required I feel. However, I've heard that using a arrow function inside a render function has high probability of causing performance issue.

I heard there are multiple ways to have parameters on a event handler, and I've seen few ways :

1. The one I used (Arrow function bind on render)

2. function returns a function

setRequestParam = (value, paramName, desc) => 

changes to

setRequestParam = (value, paramName, desc) => () => 

thus, doing

<DropdownItem onClick={this.setRequestParam(item,'Defense', 'summary')}

would still pass parameters.

3. Use currentTarget with event

<DropdownItem onClick={this.setRequestParam}
              name = 'defenseSummary'
>

setRequestParam = (e) => {
    if (e.currentTarget.name === 'defenseSummary'){

           this.setState({
          params : {
              ...this.state.params,
              'Defense' : e.currentTarget.getAttribute("dropdownvalue")
            }
          }, function setStateCallback(){          
             console.log(this.state.params)

             this.getStatsData('Summary')
          }
        ) 
    }

    else if ( .. for different parameter possible ) { }
}

So my Questions are :

1. Considering current situation of having to make a different post request on dropdown item onclick, am I doing somethign wrong? Any other recommendation?
2. is solution (2 : function returns a function) any different from solution (1 : Arorw function bind) as in 'creates function everytime rendered'?
3. Assuming I have 30 of DropdownItem Components, Does "performance issue on arrow/bind function in render function' mean
   A) I'm gonna be loading 30 functions every time I render the Parent component, being stacked up somewhere in browser? so like if i load the page 100 times, do i have 3000 functions stacked up somwhere, leading to guarranteed crash basically?
   B) or the function is basically just repeated 30 times per my parent component, which also gets de-mounted when the component demounts, which means with limited amount of items it could be OK to use?
4. Is there any other recommended way to pass down various (could be variable of string? parameters to event handler?