Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/Savy011/fullstackopen-exercises. My Exercise Submissions for FullStack Open fullstackopen.com/en
Something went wrong. Try again.
1.0 kB · 39 lines
JavaScript
at main
12345678910111213141516171819202122232425262728293031323334353637383940import { forwardRef, useImperativeHandle, useState } from 'react'import propTypes from 'prop-types'
const Toggleable = forwardRef((props, refs) => { const [visible, setVisible] = useState(false)
const hideWhenVisible = { display: visible ? 'none' : '' } const showWhenVisible = { display: visible ? '' : 'none' }
Toggleable.displayName = 'Toggleable' Toggleable.propTypes = { buttonLabel: propTypes.string.isRequired, }
const toggleVisibility = () => { setVisible(!visible) }
useImperativeHandle(refs, () => { return { toggleVisibility, } })
return ( <div> <div style={hideWhenVisible}> <button onClick={toggleVisibility}>{props.buttonLabel}</button> </div>
<div style={showWhenVisible}> {props.children} <button onClick={toggleVisibility}>Cancel</button> </div> </div> )})
export default Toggleable