Typescript: Clicking 'X' doesn't successfully close my popup banner-CodePudding

I've created a popup banner with the following code (sorry if the format is off)

 //this is in folder Banner.tsx

  import React, {useCallback} from "react";
  type Properties = {
        close: () => void;
       text: string;

   const Banner: React.FC<Properties> = ({close, text}) => {
   const onClick = useCallback(() => {
                   close();},
                   [close, text]);
   return (
      <div className = "BannerBox">
           <div className = "banner">
          <span className = "popup"> {onClick}{close}[x]
          </span>
          {text}
          </div>
     </div>
     );
     };
   export default Banner;


//this is App.tsx

import Banner from "./Components/Banner";
function App(): JSX.Element {

const [isOpen, setIsOpen]=useState(false);
      const toggleBanner = () => {
      SetIsOpen(!isOpen);
};

return (
    <div>
      <input type = "button"
          value = "popup"
          onClick={toggleBanner}/>
          <p>hi</p>
          {isOpen && <Banner text = {"hello"} close={function (): void { throw new Error("Function not implemented.");
          } }/>}
    </div>
export default App;


 //this is my Banner.css file (let me know if you need the full code but this is some of it)

.BannerBox{
 position: fixed;
 background: blue;
 width:50%;

 }
 
 .banner{
 position: relative;
 width: 100%;
 }

 .popup{
 content: 'x';
 position: fixed;
 background: green;
 
 }

the code compiles just fine, I'm not getting any errors but the problem is that when the banner pop-ups, I can't close it by clicking 'X' i have to refresh the page in order to close the banner and I'm not sure how to fix that. Any help is appreciated!

CodePudding user response：

The close function needs to be passed to the onClick callback for the span which is acting as the button. These are added as "attributes" for the jsx element. See below onClick={onClick} where your onClick callback function is passed by reference (notice no invoking parentheses within the curly braces)

In the return of Banner.tsx

        <span className="popup" onClick={onClick}>
          [x]
        </span>

close is passed into your Banner component, so this needs to be implemented in your App component. I ensured it always closes by explicitly setting isOpen to false (instead of calling toggle)

in the return of App.tsx

{isOpen && <Banner text={"hello"} close={() => setIsOpen(false)} />}

so in total

Banner.tsx

import React, { useCallback } from "react";
import "./Banner.css";

type Properties = {
  close: () => void;
  text: string;
};

const Banner: React.FC<Properties> = ({ close, text }) => {
  const onClick = useCallback(() => {
    close();
  }, [close]);

  return (
    <div className="BannerBox">
      <div className="banner">
        <span className="popup" onClick={onClick}>
          [x]
        </span>
        {text}
      </div>
    </div>
  );
};

export default Banner;

and App.tsx

import React, { useState } from "react";

import Banner from "./Components/Banner";

function App(): JSX.Element {
  const [isOpen, setIsOpen] = useState(false);

  const toggleBanner = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div>
      <input type="button" value="popup" onClick={toggleBanner} />
      <p>hi</p>
      {isOpen && <Banner text={"hello"} close={() => setIsOpen(false)} />}
    </div>
  );
}

export default App;

See codesandbox here

CodePudding user response：

Let's assume that close() will actually close the popup banner since you did't show the implementation of it.

This line causes the issue

<span className = "popup">{onClick}{close}[x]</span>

You are supposed to pass a function to the onClick listener. Something like:

<span className = "popup" onClick={close}>[x]</span>