I'm trying to create 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 in 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 = {<><b>testing</b><p>testing popup</p><button>testing button</button></>} handleClose={toggleBanner}/>}
      </div>
export default App;

but i keep getting this error and i'm not sure how to fix it -> type element is not assignable to type "string". the error is on this line: {isOpen && <Banner text = {<>testing

testing popup

I think I fixed the original problem so now this is what my App.tsx looks like

    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;

but when I add css and I style the pop up box, it doesn't close when I press x. I have to refresh the site in order to close it and I'm not sure how to fix this. There's no more compile errors.

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

CodePudding user response：

That's because in

<Banner text = {<>testing testing popup testing button</>} handleClose={toggleBanner}/>}

text attribute expects a string not an element. You have defined it yourself here

 type Properties = {
     close: () => void;
     text: string; //this line