1

Tengo un pequeño problema al tratar de enviar mis props y funciones a un componente funcional, veran. Quiero tener el state y las funciones en un Component y la interfaz en un Componente Funcional, mi pregunta es ¿Cómo envio yo las propiedades del Component al Componente Funcional?

A continuación les pongo mi codigo para que puedan ayudarme, de antemano muchisimas gracias!

import React, { PureComponent } from "react";

import ModalComponent from "../../components/ModalComponent";



class ModalContainer extends PureComponent {
  state = {
    open: false
  };

  handleOpen = () => {
    this.setState({ open: true });
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  render() {
    return (
      <ModalComponent
        open={this.state.open}
        handleOpen={this.handleOpen}
        handleClose={this.handleClose}
      />
    );
  }
}

export default ModalContainer;

Y mi ModalComponent, que es el cual quiero que reciba las propiedades. (No pondre la otra parte del codigo para no entorpecer con distracciones)

function ModalComponent(props) {
  const { classes } = props;

  return (
    <div>
      <Button onClick={props.handleOpen}>Open Modal</Button>
      <Modal open={props.open} onClose={props.handleClose}>
        <div style={getModalStyle()} className={classes.paper}>
          {props.children}
        </div>
      </Modal>
    </div>
  );
}
2
  • las funciones deberías pasarlas asi: () => this.tufuncion() dentro de los props del componente hijo.
    – mariovzc
    Commented el 30 nov. 2018 a las 2:18
  • No entiendo, además eso no tiene sentido. Commented el 30 nov. 2018 a las 2:28

2 respuestas 2

0

La forma mas facil de pasar una función es usando Arrow Functions como te muestro en mi ejemplo:

import React, { Component } from 'react';
import { render } from 'react-dom';
import MyComponent from './MyComponent';

class App extends Component {
  constructor() {
    super();
  }
  render() {
    return (
      <div>
        <MyComponent
          button1={()=>this.saludar1()}
          button2={()=>this.saludar2()}
        />
      </div>
    );
  }
  saludar1() {
    alert('Hola 1');
  }
  saludar2() {
    alert('Hola 2');
  }
}


import React, { Component } from 'react';

class MyComponent extends Component {
  constructor() {
    super();
  }

  render() {
    return (
      <div>
        <h1>
          MyComponent
        </h1>
          <button onClick={this.props.button1}>
            Boton 1
          </button>
          <button onClick={this.props.button2}>
            Boton 2
          </button>
      </div>
    );
  }
}

export default MyComponent;
1
  • No se que pasa, sigue sin funcionar, pero fijate que mi componente receptor es una función y no un Componente definido con class. He probado con los tutos de la web oficial de React pero, no puedo enviar ni un texto como propiedad desde el primer componente. Commented el 30 nov. 2018 a las 19:57
0

En tu componenete funcional te falta importar React, si usas JSX, React debe estar en el scope, por lo que tu componente funcional quedaría así:

import React from 'react'

function ModalComponent(props) {
  const { classes } = props;

  return (
    <div>
      <Button onClick={props.handleOpen}>Open Modal</Button>
      <Modal open={props.open} onClose={props.handleClose}>
        <div style={getModalStyle()} className={classes.paper}>
          {props.children}
        </div>
      </Modal>
    </div>
  );
}
1
  • Claro, si había importado React. La proxima vez que cree otro componente voy a ver si era eso o algo, de todas maneras, al final lo solucione, pero no recuerdo como. De todas maneras muchas gracias :D! Commented el 5 dic. 2018 a las 16:18

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.