How do i render a component after a password is submitted? - reactjs

Question

I have components in my react single page web app that require a password to view. Upon clicking the 's, a password form component is rendered. I have the logic written to check if the password is correct. If it is correct, how do I then leave the password form component, and render the component that the link was originally headed to?
I've tried just toggling visibility but I think I'm mostly confused on how specifically to use React Router to render a component on the condition that the password was correct
Parent Component
handleClick = (e) => {
e.preventDefault();
this.setState({ isPasswordVisible: !this.state.isPasswordVisible });
}
render() {
return (
<div className="BigNames">
<Link onClick={this.handleClick} className="BigNames-link" to='/Adobe' style={{textDecoration:'none'}}>
<span className='Name'>Adobe Creative Cloud</span>
<span className='Text'>: App Banner</span> <i className="fas fa-lock"></i>
</Link>
Password Component
import React, { Component } from 'react';
import './Password.css';
import Adobe from './Big Work/Adobe';
export default class Password extends Component {
static defaultProps = {
password: 'pierpoint'
}
constructor(props) {
super(props)
this.state = {
visible: true,
value: ''
}
this.handleClick = this.handleClick.bind(this)
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(e) {
e.preventDefault();
this.setState({value: e.target.value});
}
handleSubmit(e) {
e.preventDefault();
if(this.state.value === this.props.password) {
alert('Correct!');
this.setState({visible: false});
return( <Adobe />)
} else (alert('Incorrect Password!'))
}
handleClick(event) {
event.preventDefault()
this.setState(prevState => ({
visible: !prevState.visible,
}))
}
render() {
if (!this.state.visible) {
return null
}
return (
<div className="pwd">
<div className="enter-pwd">
<button className='exit' onClick={this.handleClick}> ✕ </button>
<form onSubmit={this.handleSubmit}>
<input
className="sub-text"
type='password'
name='password'
placeholder='Enter password'
value={this.state.value}
onChange={this.handleChange}>
</input>
<button
className="sub-mit"
type='submit'>
submit
</button>
</form>
</div>
</div>
)
}
}
The password component does go away after a correct password is submitted, however the following conditional component doesn't render.s

Answer 1

Here is the codepen showing the full example : Hidden by password page
In my example, the hidden page is a component I called SecretPage and the form handling the password is called Password. The parent component is App.
Because I needed to know inside of App whether the password was correct or not, the first step was to make Password a controlled component.
function Password(props){
return (
<div>
<p>Maybe the secret is a potato ?</p>
<form onSubmit={props.onSubmit}>
<input type='password' value={props.password} onChange={props.onChange}/>
<input type='submit' value='submit'/>
</form>
</div>);
}
What that means is simply that onSubmit, onChange and the value of password input itself are all given as props, and are handled by App and not by Password itself.
Here is how Password is called inside the App function
<Password password={this.state.password} onChange={this.handleChange} onSubmit={this.handleSubmit} />
Whenever the form is submitted, the function handleSubmit from App is called and it looks like this:
handleSubmit(e){
e.preventDefault();
this.setState({
secretVisible : this.checkPassword(this.state.password),
});
}
Because secretVisible is a state of the App now, knowing which page it should display is really easy. It only needs to check the this.state.secretVisible.
render(){
const secretVisible = this.state.secretVisible;
let pageToDisplay;
if(secretVisible){
pageToDisplay = <SecretPage onTakeMeBackClicked={this.handleLogOff}/>;
}
else{
pageToDisplay = <Password password={this.state.password} onChange={this.handleChange} onSubmit={this.handleSubmit} />;
}
return (
<div>
{pageToDisplay}
</div>
);
}
}

Answer 2

There are several ways to handle it. You can F.E use protected route togheter with react-router or in a simple case you can:
class App extends Component {
state = {
isAuthenticated: false,
}
setIsAuthenticated = (bool) => {
this.setState({isAuthenticated: bool})
}
render(){
const { isAuthenticated } = this.state;
return(
if(isAuthenticated){
return <YourMainComponent />
)
return <AuthFormComponent setIsAuthenticated={this.setIsAuthenticated} />
}
}
This is just an example, but I hope it gives you a tip on how to handle it.

Answer 3

There's not a ton of code here to give a proper example, but in pseudocode you'll want to do something like:
<div>
{isPasswordVerified
? <ComponentYouWantToShow />
: <Password callbackProp={setIsPasswordVerified} />
}
</div>
The Password component needs a callback prop to send whether the verification was successful to the parent component. Then in the parent component you can conditionally render the appropriate component. No need to deal w/ Routing here.