React-Redux Application: 'props' is not defined' - reactjs

Question

I am creating a React-Redux application. Before adding the content above render(), props was defined. However, after I started adding said content, the app began having problems reading the variable. I don't know what happened.
Could somebody please help me understand why props isn't being recognized anymore? I'd really appreciate it.
Login.js
import React from 'react';
import Modal from 'react-bootstrap/Modal';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import './login.css';
class LoginForm extends React.Component {
constructor(props) {
super(props);
this.state = {
username: ''
}
this.onChange = this.onChange.bind(this);
}
onChange(e) {
this.setState({ [e.target.name]: e.target.value});
}
render() {
return (
<>
<Modal show={props.modalOpen} onHide={props.handleModalOpen}>
<Modal.Header closeButton>
<Modal.Title>Login</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group>
<Form.Label>Username</Form.Label>
<Form.Control
type="text"
name="username"
className="form-control"
/>
</Form.Group>
<Form.Group>
<Form.Label>Password</Form.Label>
<Form.Control
type="text"
name="password"
className="form-control"
/>
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="danger" type="submit" onClick={props.handleModalOpen}>
Submit
</Button>
<Button variant="primary" onClick={props.handleClose}>
Cancel
</Button>
</Modal.Footer>
</Modal>
</>
);
}
}
export default LoginForm;
Navbar.js
import React from "react";
import { Link } from 'react-router-dom';
import './navbar.css';
import LoginForm from '../LoginForm/login.js';
// import SignUpModal from '../SignUpModal/signup.js';
class Navbar extends React.Component {
state = {
modalOpen: false
}
handleModalOpen = () => {
this.setState((prevState) => {
return {
modalOpen: !prevState.modalOpen
}
})
}
render() {
return (
<div>
<nav className="navbar navbar-expand-sm navbar-dark px-sm-5">
<div className="container">
<Link to='/'>
<div className="navbar-brand">
<i class="fas fa-globe fa-2x"></i>
</div>
</Link>
<ul className="navbar-nav align-items-right">
<li className="nav-item ml-5">
<a onClick={this.handleModalOpen} className="nav-link">
Login
</a>
</li>
<li className="nav-item ml-5">
<a onClick={this.handleModalOpen} className="nav-link">
Sign Up
</a>
</li>
</ul>
</div>
</nav>
<LoginForm
modalOpen={this.state.modalOpen}
handleModalOpen={this.handleModalOpen}
/>
{/* <SignUpModal
modalOpen={this.state.modalOpen}
handleModalOpen={this.handleModalOpen}
/> */}
</div>
)
}
}
export default Navbar;

Answer 1

In your Login.js, it's written using class-based syntax, hence it has to be this.props instead of props
<Modal show={this.props.modalOpen} onHide={this.props.handleModalOpen}>
Alternatively, Login.js can be rewrite into functional-based component, you can then use props like below
const Login = props => {
return (
<Modal show={props.modalOpen} onHide={props.handleModalOpen} />
)
}