Finding the parameters that can be used in an external component’s props in React

App.js

export default function App() {


const handleClick=(data1,data2)=>{
    console.log(data1,data2).  ----> output: Hello world This is a sentence 
}
 
  return (
    <div className="App">
      <TestBox onClick={handleClick}  />
    </div>
  );
}

TestBox.js

export function TestBox(props) {
  return (
    <div
      onClick={() => props.onClick("Hello world", "This is a sentence")}
      style={{ height: "100px", width: "100px", border: "1px solid black" }}
    >
      <h1>Hello</h1>
    </div>
  );
}

Codesandbox of the example above

Main Question

Assuming that I didn’t read the source code in TestBox.js, how to find out that TestBox.js provided 2 parameters (data1 & data2) to my functions?

More Context

I frequently have this problem when I use third party libararies, as an example, Rechart.JS ‘s documentation specifies that I can call the onMouseEnter function, but it doesn’t specify that I have access to the data parameter. Therefore, I do not even know that I have access to ‘data’ until I tried to print it like below. Thus, I have the question above.

<LineChart width={730} height={250} data={data} onMouseEnter={(data)=>console.log(data)}  >
//omitted
</LineChart>

Answer

What I like to do is, I try to test a function with as many parameters as possible and console.log them after:

unknownFunction(a,b,c,d,e) => console.log(a,b,c,d,e);

• Look into console for the structure of the data
• Look at the undefined values to find out how many parameters the function takes: For example you pass 5 parameters a, b, c, d and e. You see values for a and b, but c, d and e are undefined. Then you know that this function only takes two parameters.

I also try to look into the documentation and try to find out more there.

Also you can try to import the function and hope for IDE to show you more information (i.e. comments, propTypes, @types annotations etc).

Finally you always can look in the source code for the function signature.