How come that onClick doesnt work in React in some situations? - reactjs

Question

for some weird reason the onClick doesnt work in my React App.
<GorillaSurfIn
onClick={() => {
console.log('gorilla clicked');
setShouldGorillaSurfOut(true);
}}
/>
As you can see I console.logged it, but I dont see anything in the console.
Very strange. Here is the SandCode box.
What it should do is render the GorillaSurfOut once we click on GorillaSurfIn.

Answer 1

Your GorillaSurfIn component never uses the props its passed. You will need to have it do something with the onClick prop, probably passing it into the div.
const GorillaSurfIn = (props) => {
return (
<div id="moving-gorilla" onClick={props.onClick}>
<motion.img
animate={{
x: 530,
y: 350,
transition: { duration: 3 }
}}
id="gorilla-surf-gif"
src={require('../images/surfing_gorilla.gif')}
/>
</div>
);
};

Answer 2

I think it's because GorillaSurfIn is a custom component, right ?
The onClick event only apply to DOM Elements, such as div.
To make it work, you would have to get the props inside the component, and apply it to a div inside the component

Answer 3

What Chandelier Axel said was write.
onClick event listener is for React elements and not for React Components. To add an event listener for a React Component you have to do something like below.
function Test({ customClickEventHandler }) {
return <div onClick={customClickEventHandler}><h1>Test Button</h1></div>;
}
class Main extends React.Component {
render() {
return (
<Test customClickEventHandler={() => console.log('Clicked')} />
);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
So, you can pass a function that has to be called when clicked as props to the child component and then add an onClick listener to the top element that contains all other elements in your child component. It works as you expected. In this situation you have to pay attention to the this keyword make sure you bind the function or use an arrow function