在 const React/Typescript 中调用函数

Question

In my application, I want to conditionally render something, so I made a function getItem which I want to call in my custom Tooltip, const CustomTooltip .

How can I call the function with the return of my custom tooltip? Currently, it render getState("A"), getState("B"), getState("C"), on the tooltip. See code below:

  const numberStates = 3;
  function getState({payload}: TooltipProps<ValueType, NameType>, state: string ){
    if(payload){
      for(let i = 0; i < numberStates; i++){
        if(payload[i].dataKey == state){
          return <p>{ payload[i] } : { payload[i].value }</p>
        }
      }
    }
    return null;
  }


  const CustomTooltip = ({ active, payload, label}: TooltipProps<ValueType, NameType>) => {
    if(active && payload && payload.length){
      return (
        <div className = "custom-tooltip">
          getState("A")
          getState("B")
          getState("C")
        </div>
      );
    }
    return null;
  }

Answer 1

You need to surround your calls to getState in brackets:

  const CustomTooltip = ({ active, payload, label}: TooltipProps<ValueType, NameType>) => {
    if(active && payload && payload.length){
      return (
        <div className = "custom-tooltip">
          {getState("A")}
          {getState("B")}
          {getState("C")}
        </div>
      );
    }
    return null;

You should expect to use this syntax if you're trying to utilize any javascript functionalities within the JSX.

More information can be found here regarding functions in react. You can scroll down to the "Example: Passing params using arrow functions" section and see an example of how brackets are necessary for using a map on the state.