click handler not toggling state-CodePudding

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

<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} />

CodePudding user response：

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>
  );
}

<ShowOffer display={"block"} toggleBoxFunct = {toggleBox}/>
    export default function ShowOffer({ display, toggleBoxFunct }) {
      return (
        <button style={{ display: `${display}` }} className="show-offer" onClick={toggleBoxFunct}>
          Show Offer
        </button>
      );
    }

CodePudding user response：

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