import React from 'react';

// Je créé un hook pour simplifier l'action du toggle :
function useToggleElement(defaultVisibility) {
  const [visible, setVisible] = React.useState(defaultVisibility)
  const toggleVisibility = () => {
    setVisible(!visible)
  }

  return { visible, toggleVisibility }
}

// Je créé un composant qui va englober les éléments enfant dans une div qui va
// avoir la classe "hidden" ou non pour afficher ou masquer le contenu
function ToggleElement({ children }) {
  const { visible, toggleVisibility } = useToggleElement(false)

  return (
    <>
      <div className={visible ? '' : 'hidden'}>
        {children}
      </div>
      <button onClick={toggleVisibility}>{visible ? 'Masquer' : 'Afficher'}</button>
    </>
  )
}

// Et enfin j'utilise le nouveau composant dans le code :
function App(props) {
  return (
    <div className='App'>
      <h1>Hello App.</h1>
      <ToggleElement>
        <p>Salut les gens</p>
      </ToggleElement>
    </div>
  )
}