1

This is my Component Login Screen, i want to check isAuthenticated is true here using props i'm able to see my flag is set to true here but i want to redirect after hit the login how can i do this?

    export class LoginPage extends Component {
        onLogin = () => {
            var credentials = {
                username: this.userName,
                password: this.password
            }
            this.props.checkLogin(credentials);
        }
        render() {
            return (
                <form>
                    <div className="imgcontainer">
                        <img src={img} alt="Avatar" className="avatar" />
                    </div>
                    <div className="container">
                        <label><b>Username</b></label>
                        <input type="text" placeholder="Enter Username" name="uname" onChange={(e) => this.userName = e.target.value} />

                        <label><b>Password</b></label>
                        <input type="password" placeholder="Enter Password" name="psw" onChange={(e) => this.password = e.target.value} />

                        <button type="submit" onClick={(event) => { event.preventDefault(); this.onLogin(); this.isUserClicked = true; }}>Login</button>
                        <label style={{ color: 'red' }}>{this.isUserClicked && !this.props.state.reducer.isAuthenticated.isUserAuthenticated && <span>Username and password not matched..!</span>}</label>
                    </div>

                </form>
            );
        }
    }

This is my map state props function

export const mapStateToProps = (state) => {
    return {
        state: state
    }
}

my dispatcher dunction to call reducer event and i'm checking the username and password there and i'm returing the state.isAuthenticated is true

export const mapDispatchToProps = (dispatch) => {
    return {
        checkLogin: (credentials) => dispatch({ type: 'CHECK_LOGIN', credentials })
    }
};

LoginPage = connect(mapStateToProps, mapDispatchToProps)(LoginPage);

export default LoginPage;

And this is my Routing File

import React, { Component } from 'react';
import logo from './logo.svg';
import { Route, Link } from 'react-router-dom'
import GamesPage from './GamesPage';
import LoginPage from './LoginPage';
import './App.css';
import AddBlogPost from './AddBlogPost';
import MembersList from './MembersList';
import Comments from './Comments';


export class HomePage extends Component {
    constructor(state)
    {
        super();
        console.log("state is:",state);
    }
    render() {
        return (
            <div className="col-md-12" style={{ paddingLeft: 'unSet' }}>
                <div className="col-md-3" style={{ paddingLeft: 'unSet' }}>
                    <div className="sidebar-nav">
                        <div className="well" style={{ width: '300px', padding: '8px 0px' }}>
                            <ul className="nav nav-list" style={{ height: '950px' }}>
                                <li className="nav-header" style={{ marginLeft: '45px', marginBottom: '50px' }}><img src={logo} className="App-logo" alt="logo" /></li>
                                <li className="active"><a href="index"><i className="fa fa-home"></i> Dashboard</a></li>
                                <li><a href="#"><i className="fa fa-edit"></i> <Link to="/AddBlog">Add Blog Post</Link></a></li>
                                <li><a href="#"><i className="fa fa-sign-in"></i> <Link to="/login">Login</Link></a></li>
                                <li><a href="#"><i className="fa fa-user"></i> <Link to="/members">Members</Link></a></li>
                                <li><a href="#"><i className="fa fa-comment"></i><Link to="/comments">Comments</Link> </a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div className="col-md-6">
                    <Route exact path="/games" component={GamesPage} />
                    <Route path="/login" component={LoginPage} />
                    <Route path="/AddBlog" component={AddBlogPost} />
                    <Route path="/members" component={MembersList} />
                    <Route path="/comments" component={Comments} />                    
                </div>
            </div>
        );
    }
}

export default HomePage;
kumar
  • 109
  • 2
  • 13
  • I suppose you are trying to redirct dynamically. In that case see https://stackoverflow.com/questions/44127739/programatically-routing-based-on-a-condition-with-react-router/44128108#44128108 – Shubham Khatri Jul 19 '17 at 09:16
  • webpack:///./~/fbjs/lib/warning.js?:36 Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`. this is the error i'm getting in console after usage of code above @ShubhamKhatri – kumar Jul 19 '17 at 09:29
  • thast's not working for me – kumar Jul 19 '17 at 09:48
  • where are you using `this.props.history.push()` – Shubham Khatri Jul 19 '17 at 10:02
  • 1
    You could also use the – thsorens Jul 19 '17 at 10:18

0 Answers0