2

¿Como puedo tener varios modal con diferentes contenidos en react?

Por ejemplo en HTML:

En el BOTON para abrir el modal se usa un : data-target="#basicExampleModal" para llamar al id: del modal id="basicExampleModal"

Entonces con poner el id de cada contenido ya puedo abrir los distintos modal con el contenido que necesito.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#basicExampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

El problema en REACT es lo siguiente:

Yo muestro el contenido desde una api por ejemplo 8 titulos, pero quiero abrir el modal al hacer clic en los titulos y mostrar el contenido extra para el titulo que corresponda.

No se como añadir a cada modal un ID y mostrar el contenido que corresponda al hacer clic.

Espero me puedan entender y ayudar. muchas gracias!

import React, { Component } from 'react';
import { MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter } from 'mdbreact';

class ModalPage extends Component {
state = {
  modal: false
}

toggle = () => {
  this.setState({
    modal: !this.state.modal
  });
}

render() {
  return (
    <MDBContainer>
      <MDBBtn onClick={this.toggle}>Modal</MDBBtn>
      <MDBModal isOpen={this.state.modal} toggle={this.toggle}>
        <MDBModalHeader toggle={this.toggle}>MDBModal title</MDBModalHeader>
        <MDBModalBody>
          (...)
        </MDBModalBody>
        <MDBModalFooter>
          <MDBBtn color="secondary" onClick={this.toggle}>Close</MDBBtn>
          <MDBBtn color="primary">Save changes</MDBBtn>
        </MDBModalFooter>
      </MDBModal>
    </MDBContainer>
    );
  }
}

export default ModalPage;

1 respuesta 1

2

bienvenido y gracias por tu pregunta. Lo que puedes hacer para lo que propones es pasar por props al componente modal el contenido de cada uno de los contenidos por id. Digamos que necesites un componente Modal genérico que pueda mostrar diferentes contenidos. Para obtener una flexibilidad y poder mostrar en cada modal lo que necesites, puedes hacer uso en React de this.props.children para el contenido. Te pongo un ejemplo:

const MyGenericModal = (props) => {
 <MDBContainer>
  <MDBBtn onClick={this.props.toggle}>Modal</MDBBtn>
  <MDBModal isOpen={this.props.modal} toggle={this.props.toggle}>
    <MDBModalHeader toggle={this.props.toggle}>{this.props.title}</MDBModalHeader>
    <MDBModalBody>
      {this.props.children}
    </MDBModalBody>
    <MDBModalFooter>
      <MDBBtn color="secondary" onClick={this.toggle}>Close</MDBBtn>
      <MDBBtn color="primary">Save changes</MDBBtn>
    </MDBModalFooter>
  </MDBModal>
 </MDBContainer>
}

Así, desde el componente Padre llamarías a MyGenericModal, pasándole la nueva información cada vez que haces uso de él.

<MyGenericModal toogle={this.toogle} modal={this.state.modal} title={this.state.title}>
.... y aquí el contenido que quieras u otro componente 
</MyGenericModal>

De esta manera puedes gestionar desde el padre el estado y contenido del modal. Saludos.

2
  • Muchas Gracias, lo solucione con tu respuesta. Saludos Commented el 25 nov. 2019 a las 0:12
  • Me alegra haberte podido ayudar, sería genial si marcaras la respuesta como válida, saludos! Commented el 25 nov. 2019 a las 0:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.