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>
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);
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.