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;
Ideally navbar should only take care of nav thing. You want to open the modal on click register click.
Here is the demo:https://codesandbox.io/s/nostalgic-faraday-g0h5b?file=/src/App.js:0-2163