onClick on <li> does't trigger - reactjs

Question

I'm having a headache trying to understand why my onClick on a <li> doesn't trigger
I'm using react
I'm posting here the snippet of code:
This is the list creation:
<div className="countryList">
<ul>
{_adminCodes.map((item) => (
<li
style={{ cursor: "pointer" }}
onClick={handleListCountryClick}
className="countryLi">{item.name}
</li>
))}
</ul>
</div>
And this is the function handleListCountryClick:
const handleListCountryClick = () => {console.log("I'm a country!")}
Any advice would be appreciated!
EDIT:
I've tryied:
onClick={handleListCountryClick()}
onClick={() => handleListCountryClick()}
EDIT 2: This component (map) is included in a father component (graphs), if I try to trigger the onClick in the map component it runs the function, instead if I try to trigger the onClick in the father component (graphs) it doesn't work
Here's a stackblitz demo

Answer 1

Try calling the function with (), by using handleListCountryClick your are referencing the function instead of executing it.
onClick={() => {handleListCountryClick()}}
Dang ok are you using a class component then try:
onClick={() => {this.handleListCountryClick()}}
Sorry I tried I would need to see more code to help further.
Test this:
onClick={() => {console.log('I worked!!')}}
if that works then there is a reference error to the function.

Answer 2

You can try by updating your code to "onClick={() => handleListCountryClick}"
Edit:
This is what I have tried in codeSandbox and getting below results:
class Country extends React.Component {
render() {
const adminCodes = ["India", "USA", "UK", "UAE"];
return (
<div>
<ul>
{adminCodes.map((item) => (
<li
key={item}
style={{ cursor: "pointer" }}
onClick={() => handleListCountryClick(item)}
>
{item}
</li>
))}
</ul>
</div>
);
}
}
const handleListCountryClick = (item) => {
console.log(`I'm a ${item}!`);
};
export default Country;
Results (on click of listitems in same order):
I'm a India!
I'm a USA!
I'm a UK!
I'm a UAE!

Answer 3

usually the onClick is written onClick={() => onClickFunction()} SO the fact you tried these solutions makes me think there's a problem somewhere else. Can you please edit the question and write more of the component code so we can understand better? Thank You.