Form Fails to redirect to another page upon submission - ReactJS

Question

I'm trying to figure out why my form fails to redirect the user after accepting the username and password. The form receives it's values from the following API/json: http://myjson.com/file/ ...So I have a function, which consist of an if-statement, which checks for the username and password, but when I click the submit button, the page reloads. Currently, the Password in the API/json is set to null.

My question: since the password in the API/json is null, the password field should accept any value?

The code:

import React, { Component } from 'react';
import {Redirect} from 'react-router-dom';
import './Login.css';

class Login extends Component {  

    state = { data: [] }

    constructor(props) {
        super(props);
        this.state = {value: ''};

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event){
        this.setState({value: event.target.value});
    }

    handleSubmit(event){
        //alert('A name was submitted: ' + this.state.value);
        this.processInfo();
        event.preventDefault();
    }

    processInfo() {
        if (this.state.username.value == '{userName}' && this.state.password == '{password}' ){
            return <Redirect to='/MemberInfo.jsx' />
        }
    }

    componentWillMount(){
        fetch('https://api.myjson.com/bins/14lgnb', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-type': 'application/json',
                'Authorization': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiR3JlZyIsInVuaXF1ZV9uYW1lIjoiZ2dyYWZmIiwibmJmIjoxNTI0ODM5Nzc1LCJleHAiOjE1MjQ5MjYxNzV9.xhvdfaWkLVZ_HLwYQuPet_2vlxNF7AoYgX-XRufiOj0'
            },
            body: JSON.stringify({
                username: 'userName',
                password: 'password',
            })
        }

        ) /*end fetch */
        .then(results => results.json()) 
        .then(data => this.setState({ data: data }))   
      }

    //render component
    render() {
    console.log(this.state.data);
        return (
            <div>

                <div className="container">

                <div className="loginContainer">
                    <h2>Member Login</h2>
                    <form onSubmit={this.handleSubmit}>
                        <div className="form-group">
                            <label for="username">User Name:</label>
                            <input type="text" id="{userName}" value={this.state.value} onChange={this.handleChange} class="form-control"  placeholder="Enter User Name"  />
                        </div>
                        <div className="form-group"> 
                            <label for="pwd">Password:</label>
                            <input type="password" id="{password}" class="form-control"  placeholder="Enter password" name="password" />
                        </div>
                        <div>

                             <input type="submit" value="submit" className="btn btn-primary" /> 
                        </div>
                   </form>
                </div>
            </div>

            </div> 

        );
      }
}

export default Login

Could I please get some guidance? As I mentioned, am new to ReactJS. Thanks

You cannot redirect by returning a JSX expression. See https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router — Roy Wang, Apr 28 '18 at 17:07
riwu - I get a message indicating that const can only be used in a .ts file (Am trying the WithRouter approach); is there a simpler method where I can just write a function within the .jsx page? Let say, in starting with the processInfo() function I already have in my code? e.g. an onClick event that that routes the user to another page? — user1724708, Apr 28 '18 at 18:34
...would windows.location.href be an appropriate alternative? — user1724708, Apr 28 '18 at 18:39

score 1 · Accepted Answer · answered Apr 28 '18 at 18:39

1

I see a lot of problems in your code. First for redirecting you can use withRouter from "react-router-dom"

import { withRouter } from 'react-router-dom'

   processInfo() {
    if (this.state.username.value == '{userName}' && this.state.password == '{password}' ){

      //Add your route there
        this.props.history.push("/yourRoute");
    }
}

export default withRouter(Login);

answered Apr 28 '18 at 18:39

MontyGoldy

739
1
13
25

Thank you, though I still have much to learn, but your solution resolved the problem. – user1724708 Apr 28 '18 at 18:52

Form Fails to redirect to another page upon submission - ReactJS

1 Answers1