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>
);
}