Conditional Rendering not working in React

Question

I'm trying to do achieve just a simple login form for an app but for some reason cannot get my ternary operator to work. I'm simply importing the login credentials using a json file and using a submit handler to compare the user input with the data using a ternary. On submit, nothing happens. See my code below:

import React from 'react'
import customData from '../db.json'
import DocumentPage from './DocumentPage'



class MemberPortal extends React.Component {

    state = {
        username: "",
        password: "",
    }

    handleUserChange = (event) => {
        this.setState({username: event.target.value});
    }

    handlePwChange = (event) => {
        this.setState({password: event.target.value});
    }

    handleSubmit = (event) => {
        event.preventDefault();
        return this.state.password == customData.password ? <DocumentPage /> : alert("incorrect login information")
    }

    render(){
        return(
            <div id ="test">
            <form onSubmit = {()=>this.handleSubmit}>
                <label for="username">User Name:</label>
                <div className="ui input">
                    <input type="text" id="username" value = {this.state.username} onChange = {this.handleUserChange} placeholder = "Username"></input>
                </div>
                <label for="password">Password:</label>
                <div className="ui input">
                    <input type="text" id="password" value = {this.state.password} onChange = {this.handlePwChange}  placeholder="Password"></input>
                </div>
                <input className="ui blue button" type="submit" value="Submit" onClick = {this.handleSubmit}></input>
            </form>
            </div>
        )
    }

}

export default MemberPortal;

You need to use this.props.history.push("/DocumentPage") to redirect to another component.. Take a look at the sandbox with your code here codesandbox.io/s/routing-7brm6 .. Instead of customData.password the check was made for " " (empty password) temporarily and you can change it back to customData.password.. If you enter something in password and if you click submit, then it would give alert.. — Maniraj Murugan
– Maniraj Murugan, Commented Jun 15, 2020 at 1:08
what happens if you remove the return from return this.state.password == customData.password ? <DocumentPage /> : alert("incorrect login information")? — DVN-Anakin
– DVN-Anakin, Commented Jun 15, 2020 at 1:08

Thai Duong Tran · Accepted Answer · 2020-06-15 01:22:39Z

handleSubmit is an event handler, it's a function that will be triggered when you click the button, you are not supposed to return a JSX element or anything from it. A good practice is to avoid return anything from an event handler to avoid confusion.

Generally speaking, and if you are familiar with static type language such as Typescript, an event handler should have the return type as void.

As other people have already pointed out, if you can redirect to another URL if the login is successful, or if you want to do some conditional rendering within the same component, you can set a state indicating that the login is success.

A code example can be:

class MemberPortal extends React.Component {

    state = {
        username: "",
        password: "",
        isLoginSuccessful: false
    }

handleSubmit = (event) => {
        event.preventDefault();

        // perform login function here
        ....

        // Login not success, alert or do anything you like
        if (this.state.password !== customData.password) {
            this.setState({ isLoginSuccessful: false });
            alert("incorrect login information");

            return;
        }

        // Login success, perform redirect or set the boolean flag to true for conditional rendering
        this.setState({ isLoginSuccessful: true });
    }
    ....

}

Collectives™ on Stack Overflow

Conditional Rendering not working in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related