0
99
Viewsclick handler not toggling state
I'm trying to create a simple app where if you click on a button, a modal overlay appears, and if you click on the 'x' in the modal it disappears. I made a component for my button, called ShowOffer, and I have an onclick on it which toggles the boolean value of modalVisible, which is a piece of state. However, nothing happens when I click on it. I made another button element with the same onclick, and it seems to work fine. Here is a code sandbox
3 answers
Answer question0
This is the simple logic. Your ShowOffer component is not identify the onclick event and this component's button is not have any event handlers. So you just pass the event or directly pass the function name for access the event. Passing props name is the important one.
<ShowOffer display={"block"} onClick = {toggleBox}/>
export default function ShowOffer({ display, onClick}) {
return (
<button style={{ display: `${display}` }} className="show-offer" onClick={onClick}>
Show Offer
</button>
);
}
or
<ShowOffer display={"block"} toggleBoxFunct = {toggleBox}/>
export default function ShowOffer({ display, toggleBoxFunct }) {
return (
<button style={{ display: `${display}` }} className="show-offer" onClick={toggleBoxFunct}>
Show Offer
</button>
);
}
0
You are adding onClick on the ShowOffer component, but here you are just passing it as a prop in it.
<ShowOffer display={"block"} onClick={toggleVisibility} />
is same as
React.createElement(ShowOffer, {
display: "block",
onClick: toggleVisibility
});
Under the hook, you are just passing an argument to a function
You have to add onClick event on the button in ShowOffer component as:
Live Demo
<button
style={{ display: `${display}` }}
onClick={toggleVisibility}
className="show-offer"
>
Show Offer
</button>
and you have to pass the toggleVisibility callback to ShowOffer as:
<ShowOffer display={"block"} toggleVisibility={toggleVisibility} />
0
You can use concept of Callbacks,
App.js, make following changes,
pass toggleVisibility={toggleVisibility} as props, no need to mention onClick at component but at button
return (
<div className="App">
<Modal display={modalVisible ? "flex" : "none"} />
<ShowOffer display={"block"} onClick={toggleVisibility} toggleVisibility={toggleVisibility}/>
<button onClick={toggleVisibility}>Button</button>
</div>
);
ShowOffer.js, props passed function, call that function here with onclick,
import React from "react";
import "./ShowOffer.css";
export default function ShowOffer({ display, toggleVisibility }) {
return (
<button style={{ display: `${display}` }} onClick={toggleVisibility} className="show-offer">
Show Offer
</button>
);
}
working solution is here, https://codesandbox.io/embed/modal-overlay-tnis9?fontsize=14&hidenavigation=1&theme=dark