Cannot pass parameter into React handler function - reactjs

Question

I'm new to react and having trouble passing a parameter to a handler function. My test code is as follows:
import React from 'react';
import { useState, useEffect } from 'react';
import './App.css';
function Container(props) {
return <button onClick={props.clickHandler("A")}>Tap</button>;
}
function App() {
function clickHandler(char) {
console.log(char);
}
return <Container clickHandler={clickHandler} />
}
export default App;
When I tap the button nothing happens, no console log. What am I doing wrong here? I have tried handlers without parameters before and they work fine.

Answer 1

Convert Container to this
function Container(props) {
return <button onClick={() => props.clickHandler("A")}>Tap</button>;
}
You need to pass function to onClick but you called it, so you are passing return value of clickHandler which is undefined

Answer 2

first you have to pass the function to the Container component like this:
lets say your Container component is a div like this:
const Container = props => {
return(
<div onClick={props.clickHandler} > your container content here </div>
)
}
export default Container;
this should work :)

Answer 3

You can use the nested arrow function in your hander.
By nesting arrow function, you can add additional params in any steps of your process.
const handled = () => () => () => {}
Try the demo in-text:
function Container(props) {
return <button onClick={props.clickHandler("AAA")}>Tap</button>;
}
function App() {
const clickHandler = value => char => e => {
console.log(value, char, e.target.innerText);
};
return <Container clickHandler={clickHandler(111)} />;
}
ReactDOM.render(<App />, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>