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
const Search = () => {
const [showResults, setShowResults] = React.useState(false)
const onClick = () => setShowResults(true)
return (
<div>
<input type="submit" value="Search" onClick={onClick} />
{ showResults ? <Results /> : null }
</div>
)
}
const Results = () => (
<div id="results" className="search-results">
Some Results
</div>
)
ReactDOM.render(<Search />, document.querySelector("#container"))
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>
);
}
xxxxxxxxxx
return(
<nav className="nav__bar">
<ul className="menu">
<li className="menu__icon" onClick={() => setShow(currentShow => !currentShow)}>
<box-icon name='menu' color="floralwhite" size="md"/>
{ show ? <Curtain/> : null }
</li>
</ul>
</nav>
);
xxxxxxxxxx
{ this.state.showMyComponent ? <MyComponent /> : null }
{ this.state.showMyComponent && <MyComponent /> }