0
192
Vistas¿Cómo mostrar un Modal una vez que se hace clic en ShowMoreClick?
<OneProfileKeyCard title="Qualification" showMoreText="See all qualifications" onShowMoreClick={() => console.log('show more')} > Creating, communicating, and implementing the organization's vision, mission, and overall direction Leading the development and implementation of the overall organization's strategy. </OneProfileKeyCard> import React from 'react' import './OneProfileKeyCard.scss' type Props = { title: string showMoreText: string onShowMoreClick: () => void } export const OneProfileKeyCard: React.FC<Props> = ({ title, showMoreText, onShowMoreClick, children }) => ( <div className="one-profile-key-card"> <h3>{ title }</h3> <div> { children } </div> <button type="button" onClick={onShowMoreClick}> { showMoreText } </button> </div> ) ¿Alguien podría ayudarme a configurar un modal? Estoy tratando de configurar un modal una vez que se hace clic en ShowMoreClick que convertiría a los niños (creando, comunicando e implementando la organización...) en un modal. Hasta ahora se ve así: 
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Deberá tener un estado administrado en el componente principal desde donde se llama al componente secundario OneProfileKeyCard .
Algo como esto
const Parent = () => { const [modalOpen, setModalOpen] = React.useState(false) return ( <div> <h1>Demo</h1> <OneProfileKeyCard title="Qualification" showMoreText="See all qualifications" onShowMoreClick={() => setModalOpen(!modalOpen)}> text ... text </OneProfileKeyCard> </div> ) } No estoy seguro de qué más hay dentro de sus componentes, pero luego necesitará una forma de cerrar el modelo, en este momento configuré el accesorio showMoreClick para abrir/cerrar, pero si eso debería abrirse, configúrelo en true y haga un paso similar para una función false de cierre.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta