if else statement in render? - reactjs

Question

I'm having some trouble with my code where I want a user to be taken to two specific pages after they click "Sign in" ONLY IF they haven't already gone through that process before. Those two pages, are below:
this.props.history.push('/decision-style');
this.props.history.push('/area-of-expertise');
How it works is, if they have already gone through the process of those two pages, I want them not to go through it again, and just to be redirected to our news page:
this.props.history.push('/news');
If they have gone through the process before, it will already have added their information in MongoDB in the documents "decisionStyle", and "role"
This is /area-of-expertise. Only want them to see this, and /decision-style if they haven't done this before, and therefore, their info isn't in Mongo
I thought I could maybe create an if... else statement in render to do something similar to what I am trying to achieve. However, that wouldn't work, so I have this code below:
class Login extends Component {
constructor(props) {
super(props);
this.state = {fact: null,
badge: null,
isLoaded: false,
error: null,
showRegistration: false,
userAuthFlow: false,
userData: {},
}
}
render() {
const self = this;
console.log(this.state.userData.decisionStyle);
// Create Registration Form
function RegistrationFormModal(props) {
return (
<Modal
{...props}
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header>
<Modal.Title id="contained-modal-title-vcenter">
Sign Up
<button className="closeBtn" onClick={self.handleCloseRegistration}></button>
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Registration/>
</Modal.Body>
</Modal>
);
}
// Login page
const {error, isLoaded, fact} = this.state;
if (error) {
return (
<div>
Error: {error.messages}
</div>
);
} else if (!isLoaded) {
return (
<Spinner style={{'width': '200px', 'height': '200px', 'font-size': '50px'}} animation="border"/>
);
} else {
return (
<div id="Login">
<Fade top>
<h1 style={{'font-size': '50px'}}>CRCounter
</h1>
<p style={{'font-size': '32px'}}> {JSON.parse(JSON.stringify(fact.fact))}</p>
<p> - {JSON.parse(JSON.stringify(fact.author))} - </p>
</Fade>
<Fade bottom>
<div id="form">
<form>
</form>
<button className="confirmBtn" userAuthFlow={self.state.userData.role !== null && self.state.userData.decisionStyle !== null ? true : false}onClick = {this.handleClick}>Sign in</button>
<a id = "register" onClick={this.handleShowRegistration}>Don't have an account?</a>
<p id = "registerNote" > You won't be able to access most parts of the platform without an account! </p>
</div>
</Fade>
<RegistrationFormModal
show={this.state.showRegistration}
/>
</div>
);
}
}
The code below I created to be mainly responsible for trying to achieve what I want, but it's not working and not sure why as I am a bit of a React noob.. lol
<button className="confirmBtn" userAuthFlow={self.state.userData.role !== null && self.state.userData.decisionStyle !== null ? true : false}onClick = {this.handleClick}>Sign in</button>
The rest of the code (and updated code as well)...
/* eslint-disable require-jsdoc */
import React, {Component} from 'react';
import './Login.css';
import Fade from 'react-reveal/Fade';
import Spinner from 'react-bootstrap/Spinner';
import axios from 'axios';
import Modal from 'react-bootstrap/Modal';
import Registration from './Registration';
class Login extends Component {
constructor(props) {
super(props);
this.state = {fact: null,
badge: null,
error: null,
fact: null,
isLoaded: false,
showRegistration: false,
userAuthFlow: false,
userData: {},
}
}
handleClick = () => {
this.props.history.push('/decision-style');
}
// Registration form
handleShowRegistration = () => {
this.props.history.push('/news');
}
handleCloseRegistration = () => {
this.setState({showRegistration: false});
}
componentDidMount(sub) {
axios.get('/services/getuserdata', {
params: {ID: sub},
})
.then((response) => {
this.setState({userData: response.data});
});
// Get the facts that will be displayed under the CRCounter logo
function getFacts() {
return axios.get('/services/facts');
};
// Get the welcome badge for the user if they signded up successfully for the platform
function getBadge() {
return axios.get('/services/badge', {
params: {
name: 'welcome',
},
});
}
Promise.all([getFacts(), getBadge()])
.then((results) => {
const responseOne = results[0].data;
const responseTwo = results[1].data;
this.setState({
isLoaded: true,
fact: responseOne,
badge: responseTwo,
});
})
.catch((error) => {
this.setState({
isLoaded: true,
fact: {author: '', fact: ''}});
});
}
handleClick() {};
handleCloseRegistration() {};
handleShowRegisteration() {};
render() {
const { error, isLoaded, fact, showRegistration, userData } = this.state;
const flow = userData.role && userData.decisionStyle;
const parse = (str) => JSON.parse(JSON.stringify(str));
// Create Registration Form
const RegistrationFormModal = (props) => {
return (
<Modal
aria-labelledby="contained-modal-title-vcenter"
centered
{...props}
>
<Modal.Header>
<Modal.Title id="contained-modal-title-vcenter">
Sign Up
<button
className="closeBtn"
onClick={this.handleCloseRegistration}
>
Close Button
</button>
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Registration />
</Modal.Body>
</Modal>
);
};
// Login page
if (error) {
return (
<div>
Error: {error.messages}
</div>
);
} else if (!isLoaded) {
return (
<Spinner style={{'width': '200px', 'height': '200px', 'font-size': '50px'}} animation="border"/>
);
} else {
return (
<div id="Login">
<Fade top>
<h1 style={{ 'font-size': '50px' }}>CRCounter</h1>
<p style={{ 'font-size': '32px' }}>{parse(fact.fact)}</p>
<p> - {parse(fact.author)} - </p>
</Fade>
<Fade bottom>
<div id="form">
<form>
</form>
<button
className="confirmBtn"
onClick={this.handleClick}
userAuthFlow={flow}
>
Sign in
</button>
<a
id="register"
onClick={this.handleShowRegistration}
>
Don't have an account?
</a>
<p id="registerNote" >
You won't be able to access most parts of the platform without an account!
</p>
</div>
</Fade>
<RegistrationFormModal show={showRegistration} />
</div>
);
}
}}
export default Login;

Answer 1

Rather than checking for falsy values, just check for truthy values instead.
Here, if we have role && decisionStyle then it is true, otherwise false.
The logical AND operator (&&) returns true if both operands are true and returns false otherwise.
self.state.userData.role && self.state.userData.decisionStyle

Answer 2

The logic in your condition is a little off. It should be something like userData.role && userData.decisionStyle;. I also took the liberty of destructuring some of your code, using arrow functions, removing self, and a couple of other things!
UPDATED
class Login extends Component {
constructor(props) {
super(props);
this.state = {
badge: null,
error: null,
fact: null,
isLoaded: false,
showRegistration: false,
userAuthFlow: false, // do you need this?
userData: {},
};
}
componentDidMount() {
// existing code here
}
handleClick = () => {
const { history } = this.props;
const flow = userData.role && userData.decisionStyle;
history.push(flow ? '/news' : '/decision-style');
}
handleShowRegistration = () => {
this.setState({ showRegistration: true });
}
handleCloseRegistration = () => {
this.setState({ showRegistration: false });
}
render() {
const { error, isLoaded, fact, showRegistration, userData } = this.state;
const parse = (str) => JSON.parse(JSON.stringify(str));
// Create Registration Form
const RegistrationFormModal = (props) => {
return (
<Modal
aria-labelledby="contained-modal-title-vcenter"
centered
{...props}
>
<Modal.Header>
<Modal.Title id="contained-modal-title-vcenter">
Sign Up
<button
className="closeBtn"
onClick={this.handleCloseRegistration}
>
Close Button
</button>
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Registration />
</Modal.Body>
</Modal>
);
};
// Login page
if (error) return <div>Error: {error.messages}</div>;
if (!isLoaded) return (
return (
<Spinner
animation='border'
style={{
font-size: '50px',
height: '200px',
width: '200px',
}}
/>
);
);
return (
<div id="Login">
<Fade top>
<h1 style={{ 'font-size': '50px' }}>CRCounter</h1>
<p style={{ 'font-size': '32px' }}>{parse(fact.fact)}</p>
<p> - {parse(fact.author)} - </p>
</Fade>
<Fade bottom>
<div id="form">
<form>
</form>
<button
className="confirmBtn"
onClick={this.handleClick}
>
Sign in
</button>
<a
id="register"
onClick={this.handleShowRegistration}
>
Don't have an account?
</a>
<p id="registerNote" >
You won't be able to access most parts of the platform without an account!
</p>
</div>
</Fade>
<RegistrationFormModal show={showRegistration} />
</div>
);
}
}