reactjs - How do I hide a React component on the second click when the component is already open?

Question

On the first click of IconButton, the React component is shown and on the second click, I'd like to hide the component.

export default function EditorToolbar(props) {

  const [open, setOpen] = React.useState(false);
  const handleOpen = () => {
    setOpen(true);
  };
}


 <IconButton size='small' onClick={handleOpen} >

question from:https://stackoverflow.com/questions/65848126/how-do-i-hide-a-react-component-on-the-second-click-when-the-component-is-alread

Answer 1

export default function EditorToolbar(props) {

  const [open, setOpen] = React.useState(false);
  const handleOpen = () => {
    setOpen(!open);
  };
}

return(
 <IconButton size='small' onClick={handleOpen} >
{open?show your react component here:null}
)