0

espero me puedan ayudar. estoy realizando mi primera aplicacion node+react y estoy tratando de dejar todo lo mejor sesionado posible.

Aqui cargo los datos en mi tabla. (no pongo codigo completo por que sale que debo poner mas contenido xd pero la tabla si carga xd)

                    export default class tableMessages extends Component {
                      state = {
                        messages: [],
                      };
              
                   render() {
                    return ( <div>
                
                      <ModalShowMessages  compartirFuncionShow={this.mostrarModal} /> 
            
                       {this.state.messages.map((message) => {
                            return (
                              <tbody key={message.id}>
                                <tr>
                                  <td className="hidden">{message.id}</td> 
                                  <td>{message.message}</td>         
                                  <td><button onClick={() => this.childShowModal()}> </button> </td>
                                </tr>
                              </tbody>
                            );
                          })}
                     </div>
                  );
                 }
               }
       
                  ```

   

y este es mi modal al que quiero cargarlo con los datos, el mensaje dependiendo del id oculto.

      export default class modalShowMessages extends Component {
            state = {
              show: false,
            };
    
      render() {
        return (
          <div>
            {this.state.show && (
              <div>
                <div onClick={() => this.show()}>
                  <div>
                    {/*content*/}
                    <div>
                      {/*header*/}
                      <div> 
                     <h3>MENSAJE DE: Title</h3>
                        <button onClick={() => this.show()}> <span> × </span>  </button>
                      </div>
    
                      {/*body*/}
                      <div><p>{mensaje aqui}</p></div>
    
                      {/*footer*/}
                      <div>
                        <button type="button" onClick={() => this.show()}> Cerrar </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>
        );
      }
    }
 ```

la pregunta es ¿como se hace? como cargo el componente modal con los datos de la tabla? dependiendo del id obvio es un mensaje diferente. si el modal lo pongo en el componente tabla ps si es facil pero no es la gracias tener esos dos componentes juntos, espero me puedan ayudar, gracias.

3
  • podrias ser mas concreto con tu problema?
    – Enzo
    Commented el 9 mar. 2021 a las 2:47
  • Claro, como digo tengo un modal que es un componente el cual tiene un text area, y tengo otro componente tabla que tienen unos datos de la bd y un boton para llamar el modal, ¿como hago para al momento de llamar el modal me cargue el textarea con un dato de esa tabla (el dato clikeado claro) Commented el 9 mar. 2021 a las 12:26
  • ok, ahora entiendo, preparare un ejemplo
    – Enzo
    Commented el 9 mar. 2021 a las 17:44

1 respuesta 1

0

una de las cosas por que las que me gusta react, es que es muy sencillo pasar informacion de un componente a otro, ya sea un hijo o un componente cualquiera, una forma de pasar datos de una vista a un modal podria ser mediante los props de react,

export default class containerData extends Document {

    constructor(props){
        super(props)
        this.state = {
            message: [],
            modalData: null,
            isShow: false
        }
    }

    showModal(message){
        this.setState({...this.state, modalData: message, isShow: true})
    }

    render(){
        const { message, modalData, isShow } = this.state
        return(
            <ul>
            {isShow && <ModalShowMessages data={modalData} /> }
              {message.map((message, index)=>(
                <tbody key={message.id}>
                  <tr>
                    <td className="hidden">{message.id}</td> 
                    <td>{message.message}</td>         
                    <td>
                      <button onClick={() => this.showModal(message)}>
                        show modal
                      </button>
                    </td>
                  </tr>
                </tbody>
              ))}
            </ul>
        )
    }
}
  1. lo primero que hago es crear otro estado para el componente padre, asi poder controlar cuando se abre el modal desde el padre y el dato del modal para pasarselo.
  2. cuando mapeo el array message a la funcion showModal le paso como argumento el dato de que me esta devolviendo el map.
  3. en la funcion showModal recibo por parametro ese dato y lo agrego al stado modalData para que el modal pueda obtenerlo.

de esta forma cuando haces click en el boton, se abre el modal con los datos del mensaje, puedes cerrar el modal pasandole una funcion para dicha accion de esta forma:

closeModal(){
    this.setState({...this.state, isShow: false})
}

<ModalShowMessages closeModal={closeModal} data={modalData} />

de esta forma en el modal voy a tener como propiedad una funcion closeModal que cierra el modal, espero que lo hayas podido entender, otra manera de poder pasar los mensajes al componente modal es a travez del useContext de react, hay varias maneras pero esta es la mas sencilla, saludos

11
  • hola, no se como mostrar los datos una vez enviados y el modal quedo abriendo haciendo 3 veces click xd Commented el 10 mar. 2021 a las 2:06
  • por favor podrías expresarte mejor ?
    – Enzo
    Commented el 10 mar. 2021 a las 2:42
  • Hola, cuando envias a message al llamar al modal ()=> this.showModal(message) ps si lo llama pero no se como mostrar el dato que enviamos al modal, la funcion la deje así. showModal(message){ this.setState({...this.state, modalData: message, isShow: !this.state.isShow}). Y en mi componente modal deje el show en true, listo, al comienzo abre de un click pero al cerrarlo necesita hacer dos veces click para volver a abrie el modal. En mi componente modal uso una funcion pasa dejar su componente en false show()=>{this.setState({show:!this.state.show})} } Commented el 10 mar. 2021 a las 13:37
  • debido al ejemplo que te di no deberias controlar el modal desde el modal, simplemente lo dejas abierto y se muestra cuando el isShow es true, en el modal no deberias condicionar componente para que se muestre sino que se mostrara desde el padre dependiendo del valor de isShow, los datos del modal los puedes obtener desde el this.props.data
    – Enzo
    Commented el 10 mar. 2021 a las 18:17
  • lo que si podrias hacer es en le modal agregar un boton para cerrarlo y una vex clickeado el boton, ejecutas la funcion que se invio mediante props closeModal={closeModal} que la obtendrias desde this.props.closeModal, closeModal es una funcion que cierra el modal, otro punto a observar, estas haciendo un toogle en la funcion showModal, isShow: !this.state.isShow cambialo a isShow: this.state.isShow
    – Enzo
    Commented el 10 mar. 2021 a las 18:20

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.