Estoy trabajando en este pequeño proyecto de React y tengo 4 botones que tienen diferentes títulos para los servicios provistos. También tengo un Modal que aparece para dar más información. Estoy usando el estado para mostrar y eliminar el componente Modal que funciona bien. Por lo tanto, estoy buscando una manera de pasar diferentes títulos y diferentes conjuntos de descripciones como accesorios para Modal, según el botón que se presionó. Es decir, si se presiona el Botón 4, se mostrará el título y el texto de descripción del Servicio 4.
Aquí está el código actual que tengo
const ServicesCard: React.FC = () => { const [modal, setModal] = useState(false); const Toggle = () => setModal(!modal); return ( <div className={classes.ServicesCard}> <div className={classes.ServicesCardContainer}> <div className={classes.TitleContainer}> <h2>Services</h2> <hr /> </div> <div className={classes.ButtonContainer}> <button onClick={() => Toggle()} id="s1"> Service 1 </button> <button onClick={() => Toggle()} id="s2"> Service 2 </button> <button onClick={() => Toggle()} id="s3"> Service 3 </button> <button onClick={() => Toggle()} id="s4"> Service 4 </button> <ServiceModal show={modal} close={Toggle} title="Service"> </ServiceModal> </div> <p>Click For More Info</p> </div> </div> ); };Cualquier ayuda sería muy apreciada.
Su curso de acción debe pasar accesorios de lo que quiera mostrar en el modal al componente ServiceModal .
Sugeriría que, en lugar de tener un estado modal , tenga un estado de servicio selectedService que comience como null . Luego, al hacer clic en un botón, cambie el estado del servicio selectedService a lo que elija y muestre el modal solo cuando el servicio selectedService no sea null
Se vería algo a lo largo de estas líneas
const SERVICES_INFO = { s1: {title: 'whatever', description: 'whatever'}, s2: //You get the gist ... } const ServicesCard: React.FC = () => { const [selectedService, setSelectedService] = useState(false); const selectService = service => setSelectedService(service); const closeModal = () => setSelectedService(null); return ( <div className={classes.ServicesCard}> <div className={classes.ServicesCardContainer}> <div className={classes.TitleContainer}> <h2>Services</h2> <hr /> </div> <div className={classes.ButtonContainer}> <button onClick={() => selectService("s1")} id="s1"> Service 1 </button> <button onClick={() => selectService("s2")} id="s2"> Service 2 </button> <button onClick={() => selectService("s3")} id="s3"> Service 3 </button> <button onClick={() => selectService("s4")} id="s4"> Service 4 </button> <ServiceModal show={selectedService !== null} close={closeModal} serviceInfo={SERVICES_INFO[selectedService]}> </ServiceModal> </div> <p>Click For More Info</p> </div> </div> ); }; Y luego, en su componente ServiceModal , puede usar la propiedad serviceInfo para representar lo que necesite.
No trabajo en React Js. Pero te estoy diciendo el Javascript. Hacer esto:
Proporcione identificaciones a su título modal y texto como modalTitle y modalText.
Ahora, cambie el texto interno de su título y texto cuando se haga clic en un botón específico
modalTitle = documet.getElementById('modalTitle'); modalText = documet.getElementById('modalText'); //if button 1 is clicked s1.addEventListner('click', ()=>{ modalTitle.innerText = 'Your Button s1 Title'; modalText.innerText = 'Your Button s1 Text'; }) //if button 2 is clicked s2.addEventListner('click', ()=>{ modalTitle.innerText = 'Your Button s2 Title'; modalText.innerText = 'Your Button s2 Text'; })Haga esto para todos los botones.