xxxxxxxxxx
{ this.state.showMyComponent ? <MyComponent /> : null }
{ this.state.showMyComponent && <MyComponent /> }
xxxxxxxxxx
import React, { useState } from 'react';
const Component = () => {
const [show, setShow] = useState(false);
return(
<>
<button onClick={() => setShow(prev => !prev)}>Click</button>
{show && <Box>This is your component</Box>}
</>
);
}
export default Component
xxxxxxxxxx
import { useState } from "react";
export default function App() {
const [show, setShow] = useState(true);
function changeState() {
setShow(!show);
}
return (
<div className="App">
{show ? (
<button onClick={changeState}> Display </button>
) : (
<button onClick={changeState}> Hide </button>
)}
</div>
);
}