import React , { ReactElement , useCallback , useState } from 'react' ; import { ReactInput } from '../stubs/react-input.stub' ; import { ReactTextSlot } from '../stubs/react-text-slot.stub' ; import { ReactTransitionSlot } from '../stubs/react-transition-slot.stub' ; returns export function SlotsView ( ) { const [ show , setShow ] = useState ( false ) ; const [ renderContainer , setRenderContainer ] = useState ( true ) ; const toggleShow = useCallback ( ( ) : void => { setShow ( ! show ) ; } , [ show , setShow ] ) ; const toggleRenderContainer = useCallback ( ( ) : void => { setRenderContainer ( ! renderContainer ) ; } , [ renderContainer , setRenderContainer ] ) ; return ( < div > { } < button onClick = { toggleRenderContainer } data - test = 'toggle-container' > Toggle container < /button> < button onClick = { toggleShow } data - test = 'toggle-show' > Toggle child < /button> { renderContainer && ( < div className = 'container' > < h1 > Container < /h1> < ReactTransitionSlot message = 'Test' show = { show } transitionDuration = { 100 } / > < /div>)} { } < ReactInput /> { } < ReactTextSlot data - test = 'text-slot-content' > text content < /ReactTextSlot> < ReactTextSlot data - test = 'no-slot-content' / > < /div>); }