Typescript Clicking X doesn t successfully close my popup banner

0 votes

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.

Jul 14, 2022 in TypeSript by Logan
• 2,140 points
780 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In TypeSript

0 votes
1 answer

VS Code enforces semicolons, but why doesn't Angular and TypeScript not use it consistently?

JavaScript has a syntactic feature known as semicolon ...READ MORE

answered May 31, 2022 in TypeSript by Nina
• 3,060 points
4,869 views
0 votes
1 answer
0 votes
1 answer

TypeScript Object assign gives me an error property assign does not exist on type ObjectConstructor

For TypeScript 2.1 and higher, you can ...READ MORE

answered May 31, 2022 in TypeSript by Nina
• 3,060 points
2,101 views
0 votes
1 answer

Cast a JSON Object to a TypeScript class

I had the same issue and this ...READ MORE

answered May 31, 2022 in TypeSript by Nina
• 3,060 points
3,095 views
0 votes
1 answer

How to apply zoom animation for each element of a list in angular?

Hey @Sid, do check if this link ...READ MORE

answered Jul 30, 2019 in Others by Vardhan
• 13,150 points
1,587 views
0 votes
1 answer

Error:Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

Hello @kartik, It is happening because any where ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,840 points
2,510 views
0 votes
1 answer

How to have conditional elements and keep DRY with Facebook React's JSX?

Hello @kartik, Let's define a simple helping If component: var If ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,840 points
718 views
0 votes
1 answer

Error:Unable to access React instance (this) inside event handler

Hello @kartik, You can use an arrow function together with ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,840 points
1,963 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP