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>
              <span className = "popup"> {onClick}{close}[x]
              </span>
              {text}
         </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

testing button</>} handleClose={toggleBanner}/>}

>Solution :

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