App.js
import AccordionBody from './AccordionBody';
import './styles.css';
function App() {
const [showBody, setShowBody] = React.useState(false);
return (
<div className="accordion">
<div className="accordion-header" onClick={() => setShowBody(!showBody)}>
testing-library
<div className="open-close">{showBody ? 'close' : 'open'}</div>
</div>
{ showBody && <AccordionBody showBody={showBody} />}
</div>
);
}
export default App;
AccordionBody
export default function AccordionBody(props) {
const {showBody}= props
useEffect(
()=> {
if (showBody) {
console.log('AccordionBody is shown')
} else{
console.log('AccordionBody is hidden')}
},[showBody]
)
return (
< div className="accordion-body">
The @testing-library family of packages helps you test UI components in a user-centric way.
</div>
);
}
