在按钮 onClick 上加载反应组件

Question

I have the following code for a button in my ReactApp to open a new window with specific size:

<button
   type="button"
   style={{ height: '20px', width: '50px' }}
   className="btn btn-primary"
   onClick={() => {
   window.open(
   "",
   "Popup",
   "width=975, height=92, top=30"
       );
     }}
 />

I want to load another component when user clicks on the button. How can I achieve that? I have tried to load the component and then use it like the following, but didn't work:

import component from "./component"

    <button
       type="button"
       style={{ height: '20px', width: '50px' }}
       className="btn btn-primary"
       onClick={() => {
       window.open(
       "{<component />}",
       "Popup",
       "width=975, height=92, top=30"
           );
         }}
     />

What would be the best way to do this?

Here is my component:

export default function component(props) {
  return (
  
    <div className="container">
      <div className="cabinet"><img src={image} />
        <div className="devices"> <img src={image2} />
       
      </div>
    </div>
  );
}

Answer 1

Add a state in main page and pass it to component

 const [open, setOpen] = useState[false];

  const onClickHandle = () => {
    setOpen(true);
  };

  return (
    <>
      <button
        type="button"
        style={{ height: '20px', width: '50px' }}
        className="btn btn-primary"
        onClick={onClickHandle}
      />
      <component open={open} />
    </>
  );

Add a new props to control the component

export default function component(props) {
  const { open } = props;
  return (
    <>
      {open && (
        <div className="container">
          <div className="cabinet">
            <img src={image} />
            <div className="devices">
              {' '}
              <img src={image2} />
            </div>
          </div>
        </div>
      )}
    </>
  );
}

Answer 2

Using state hooks and conditional rendering, you can load a react component on a button onClick.

const [visible, setVisible] = React.useState(false);

function click(e) {
  e.preventDefault();
  setVisible(true);
}

return (
  <div>
    <button onClick={(event) => {
       click(event)
    }} />
    
    {isVisible && (
      <YourComponent />
      )
    }
  </div>
)