Pregunta de novato... :) Estoy tratando de mostrar y ocultar una sugerencia sobre un elemento después de un clic. Ahora funciona con el clic inicial para abrir el elemento, pero me gustaría alternar el estado después del clic inicial. Y en el elemento abierto también me gustaría usar un elemento para cerrar el contenido nuevamente ... ¡cualquier ayuda es muy apreciada!
const Tip = () => { const [showResults, showTipContent] = React.useState(false) const onClick = () => showTipContent(true) return ( <span onClick={onClick}> <svg className="cursor-pointer" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 9.5C12.6904 9.5 13.25 8.9404 13.25 8.25C13.25 7.5596 12.6904 7 12 7C11.3096 7 10.75 7.5596 10.75 8.25C10.75 8.9404 11.3096 9.5 12 9.5ZM11 11V17H13V11H11Z" fill="#111111"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.4771 2 2 6.4771 2 12C2 17.5228 6.4771 22 12 22C17.5228 22 22 17.5228 22 12C22 6.4771 17.5228 2 12 2ZM4 12C4 7.5817 7.5817 4 12 4C16.4183 4 20 7.5817 20 12C20 16.4183 16.4183 20 12 20C7.5817 20 4 16.4183 4 12Z" fill="#111111"/> </svg> { showResults ? <TipContent /> : null } </span> ) } const TipContent = () => ( <div className="tipContent"> {tip} <span className="cursor-pointer">CLOSE</span> </div> )```Si entiendo correctamente, desea habilitar la funcionalidad de alternar para que su botón muestre y también oculte su contenido. Si es así, querrá cambiar su onClick para alternar su estado showResults en lugar de tenerlo siempre codificado en true . Puede alternar un valor booleano usando ! ( no lógico ) delante de él.
Para permitir que su componente secundario cierre su contenido, puede pasar su función de alternar como accesorio . La función que pase puede ser la misma que usa para alternar su estado de showResults , ya que el botón "cerrar" solo aparecerá si la Tip está abierta, lo que hace que establezca su estado para showResults en falso (es decir, lo que ocultará el componente):
const Tip = () => { const [showResults, showTipContent] = React.useState(false) const toggleResults = () => showTipContent(results => !results); // toggle the current state value from hidden to visible, and visible to hidden return ( <span onClick={toggleResults}> <svg className="cursor-pointer" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 9.5C12.6904 9.5 13.25 8.9404 13.25 8.25C13.25 7.5596 12.6904 7 12 7C11.3096 7 10.75 7.5596 10.75 8.25C10.75 8.9404 11.3096 9.5 12 9.5ZM11 11V17H13V11H11Z" fill="#111111"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.4771 2 2 6.4771 2 12C2 17.5228 6.4771 22 12 22C17.5228 22 22 17.5228 22 12C22 6.4771 17.5228 2 12 2ZM4 12C4 7.5817 7.5817 4 12 4C16.4183 4 20 7.5817 20 12C20 16.4183 16.4183 20 12 20C7.5817 20 4 16.4183 4 12Z" fill="#111111"/> </svg> { showResults ? <TipContent closeContent={toggleResults}/> : null } </span> ) } const TipContent = ({closeContent}) => ( <div className="tipContent"> {tip} <span className="cursor-pointer" onClick={closeContent}>CLOSE</span> </div> )