Приложение React-Redux: «реквизит» не определен

Я создаю приложение React-Redux. Перед добавлением содержимого выше render() было определено props. Однако после того, как я начал добавлять указанный контент, у приложения начались проблемы с чтением переменной. Я не знаю, что случилось.

Может ли кто-нибудь помочь мне понять, почему props больше не распознается? Я был бы очень признателен.

Логин.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;