React seems to only allow the event listener prop name to be same as the function name when passing that function to the child component

Question

My understanding is that I can choose any prop name I want when passing a function to a custom child component. It appears however that when I am registering the event listener, React seems to only allow me to name the prop the same as the function name I am passing in: (click on the picture to view it at 100% resolution)

Questions:

• Has anyone else come across this?

• Does anyone have any input as to why this might happen?

Edit: Here is a screen shot of my console showing that the event listener function is getting passed in to the child component:

Answer 1

My understanding is that I can choose any prop name I want when passing a function to a custom child component

No. It is when you are writing a component that you can define any prop name it will accept.

The component defined in Box2.js only pays attention to a prop named toggle.

When passing a function to an instance of that component, you must use the prop name that the component expects. You can't use any name at this point. Box2 expects toggle so that is is the prop you must assign a value to.

It doesn't matter how you determine the value you pass to that prop.

<Box toggle={someLocalVariableName}> ... </Box>

or

<Box toggle={() => { /* a literal function */ }}> ... </Box>