Unable to open Modal in ReactJS - reactjs

Question

Explanation
I am building a simple ReactJS web page where one can login/signup. I've built the home page and have a navbar with login and signup buttons on it. I'm using MaterialUI. I want the login modal to open when clicking on the login button. But till now, I've only been able to open the modal from a button directly inside the modal's code.
What I've done
I've researched a LOT on stackoverflow and the web and tried implementing a few of the approaches like refs in all different ways specified. I've tried reading the ReactJS documentation to understand the concepts.
Code:
I have a separate file for the Login Modal and for the Navbar. Currently, I'm exporting the LoginModal component into the Navbar file. Then exporting the Navbar component into the HomePage file.
Here is the navbar file's code (Navbar.js):
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import Typography from '#material-ui/core/Typography';
import Button from '#material-ui/core/Button';
import LoginModal from './LoginModal.js';
const styles = {
root: {
flexGrow: 1,
},
grow: {
flexGrow: 1,
},
navbar: {
backgroundColor: 'transparent',
boxShadow: 'none',
color: '#06ABFB'
}
};
class Navbar extends React.Component {
constructor(props) {
super(props);
this.loginmodal = React.createRef();
}
openLoginModal = () => {
console.log(this.loginmodal.current);
};
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<LoginModal ref={this.loginmodal} />
<AppBar position="static" className={classes.navbar}>
<Toolbar>
<Typography variant="title" color="inherit" className={classes.grow}>
WorkNet
</Typography>
<Button color="inherit" onClick={this.openLoginModal}>Login</Button>
<Button color="inherit">Sign Up</Button>
</Toolbar>
</AppBar>
</div>
);
}
}
Navbar.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Navbar);
and here is the code for the login modal (LoginModal.js)
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import Typography from '#material-ui/core/Typography';
import Button from '#material-ui/core/Button';
import LoginModal from './LoginModal.js';
const styles = {
root: {
flexGrow: 1,
},
grow: {
flexGrow: 1,
},
navbar: {
backgroundColor: 'transparent',
boxShadow: 'none',
color: '#06ABFB'
}
};
class Navbar extends React.Component {
constructor(props) {
super(props);
this.loginmodal = React.createRef();
}
openLoginModal = () => {
console.log(this.loginmodal.current);
};
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<LoginModal ref={this.loginmodal} />
<AppBar position="static" className={classes.navbar}>
<Toolbar>
<Typography variant="title" color="inherit" className={classes.grow}>
WorkNet
</Typography>
<Button color="inherit" onClick={this.openLoginModal}>Login</Button>
<Button color="inherit">Sign Up</Button>
</Toolbar>
</AppBar>
</div>
);
}
}
Navbar.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Navbar);

Answer 1

A few things to consider:
In openLoginModal, console.log is not going to do anything other than print to the console.
You probably do not need to use refs for this. Check this out!
Instead, you can set a state in Navbar.js with something like:
handleModal = () => {
this.setState({modalIsOpen: !this.state.modalIsOpen});
};
Then you can pass that to your Modal using props with something like:
<LoginModal open={this.state.modalIsOpen} onClose={this.handleModal} />
<Button color="inherit" onClick={this.handleModal}>Login</Button>