NavLink not showing in Navbar

Question

I feel like this is so simple but I've been looking at it for an hour. I am making a register using modal, and having it open when a link in the navbar is clicked. I tried placing registerModal in various files such as App.js and other components, but it doesn't appear anywhere. This is my first time using react, so is there something I'm not doing right? EDITED: I included more of my registerModal.

In my registerModal component: class registerModal extends Component{

state = {
    modal: false,
    name: '',
    email: '',
    password:'',
    msg: null
}
static propTypes ={
    isAuthenticated: PropTypes.bool,
    error: PropTypes.object.isRequired,
    register: PropTypes.func.isRequired,
    clearErrors: PropTypes.func.isRequired
}
componentDidUpdate(prevProps){
    const {error} = this.props;
    if(error !== prevProps.error){
        //reg error
        if(error.id === 'REGISTER_FAIL'){
            this.setState({msg: error.msg.msg})
        }else{
            this.setState({msg: null});
        }
    } 
}
toggle = () =>{
    this.props.clearErrors();
    this.setState({
        modal: !this.state.modal
    
    });
}
onChange = (e)=>{
    this.setState(
        {[e.target.name]: e.target.value}
        );
}
onSubmit = e =>{
    e.preventDefault();
    const{name, email, password} = this.state;
    //create user object
    const newUser = {
        name,
        email,
        password
    };
    this.props.register(newUser);
    
}


render(){
return(
<div>
<NavLink onClick = {this.toggle} href ="#" color = "danger">
                    Register
</NavLink>

My appNavbar:

import React, {Component } from 'react';
import{
    Collapse,
    Navbar,
    NavbarToggler,
    NavbarBrand,
    Nav,
    NavItem,
    NavLink,
    Container
    
} from 'reactstrap';
import registerModal from './auth/registerModal'
class AppNavBar extends Component{
    state = {
           isOpen: false
       }

    toggle = () =>{
        this.setState({
            isOpen: !this.state.isOpen

        });
    }
    render() {
        return(
        <div>

            <Navbar color ="dark" dark expand= "sm" className = "mb-5">
                <Container>
                    <NavbarBrand href = "/">Recipe Book</NavbarBrand>
                   
                    <NavbarToggler onClick= {this.toggle}/>
                    <Collapse isOpen= {this.state.isOpen} navbar>
                        <Nav clasName = "ml-auto" navbar>
                            <NavItem>
                            <registerModal/>
                            </NavItem>
                        </Nav>
                    </Collapse>
                </Container>

            </Navbar>
        </div>
        );
    }

 }

export default AppNavBar;

Answer 1

Ideally navbar should only take care of nav thing. You want to open the modal on click register click.

1. You have register component which is modal -> It should only care about modal is open or not
2. When clicking on register it should trigger modal state. For that we need some central(Parent component) which take care of navbar and register component (i.e based on state show signup component).

import React, { Component, useState } from "react";

import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Button,
  Container
} from "reactstrap";
import "./styles.css";
// import registerModal from './auth/registerModal'

const RegisterModal = ({ modal, toggle }) => {
  return (
    <div>
      <Modal isOpen={modal} toggle={toggle}>
        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>
            Do Something
          </Button>{" "}
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
};
class AppNavBar extends Component {
  render() {
    return (
      <div>
        <Navbar color="dark" dark expand="sm" className="mb-5">
          <Container>
            <NavbarBrand href="/">Recipe Book</NavbarBrand>

            <Collapse navbar>
              <Nav clasName="ml-auto" navbar>
                <NavLink onClick={this.props.toggle} href="#" color="danger">
                  Register
                </NavLink>
              </Nav>
            </Collapse>
          </Container>
        </Navbar>
      </div>
    );
  }
}

export default function App() {
  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <AppNavBar toggle={toggle} />
      <RegisterModal modal={modal} toggle={toggle} />
    </div>
  );
}

Here is the demo:https://codesandbox.io/s/nostalgic-faraday-g0h5b?file=/src/App.js:0-2163