How to render a redux connected component in a modal - reactjs

Question

I am trying to add authentication to my react redux app, and I want to use modals for the login and signup pages. I have a LoginForm and a SignupForm which are static components, and I have LoginPage and SignupPage, which are my container components for the forms.
I am currently able to render the container components using login and signup routes, but I want switch to using modals.
Please how do I do this using a modal, say, react-materialize modal or normal materialize css modal?
Thanks for the help.

Answer 1

Revisiting this answer, I would say you need to have two components able to communicate. This is the plain React way to do this. Notice there is one App component with two sibling components. By passing a props value to the Modal component and a props callback to its sibling, we can get the modal to render or not render.
class Modal extends React.Component {
render() {
return this.props.modalShow ? (
<div className="modal">
Modal loaded
</div>
) : null;
};
};
class Sibling extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.props.openModal();
}
render() {
return (
<div>
I am a sibling element.
<button onClick={this.handleClick}>Show modal</button>
</div>
)
};
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
modalShow: false,
};
this.openModal = this.openModal.bind(this);
};
openModal() {
this.setState({ modalShow: true });
}
render() {
return (
<div>
<Modal modalShow={this.state.modalShow} />
<Sibling openModal={this.openModal}/>
</div>
)
};
};
ReactDOM.render(
<App />,
document.getElementById('app')
);
From here, using Redux is much simpler since the state is "global" already. But the idea is the same. Instead of having a parent control the state, just use your reducers and actions. I hope this helps.