Redirecting onClick

Question

This is a weird situation. So I have this Login component:

export default class Login extends React.Component {
    componentDidMount() {
        var email = document.getElementById('email').value;
        var password = document.getElementById('password').value;
        firebase
            .auth()
            .signInWithEmailAndPassword(email, password)
            .then(() => document.getElementById('close').click())
            .catch(e => console.log(e));
    }

    render() {
        if (firebase.auth().currentUser === null)
            return '';
        else return <Redirect to='/questions'/>
    }
}

And this is my LoginForm

export default class LoginFormComponent extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Modal
                show={this.props.show}
                onHide={() => this.props.changeShowState(false)}>
                <Modal.Header
                    closeButton>
                    <Modal.Title> Zaloguj sie </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <form>
                        <FormControl
                            id="email"
                            type="email"
                            label="Email address"
                            placeholder="Enter email"/>
                        <FormControl id="password" label="Password" type="password"/>
                        <Button onClick={<Login/>}>Zaloguj</Button>
                        {/*The problem is ^^^^^ here*/}

                    </form>
                </Modal.Body>
                <Modal.Footer>
                    <Button id="close" onClick={() => this.props.changeShowState(false)}>Close</Button>
                </Modal.Footer>
            </Modal>
        )
    }
}

The whole problem is, I want to redirect the page, after the user logs in. I did some research and I figured I have to do it this way.

The problem is the <Login/> element is not rendered. I'm guessing it's just not how React works, but I have no other idea how to get it done. All I want to do is redirect a user after loging in.

haui · Accepted Answer · 2018-06-08 14:53:49Z

You don't have to have it in two components. Your main problem is that you cannot give a React component as an onClick handler.

My take on it would be:

export default class LoginFormComponent extends React.Component {
    state = { loggedIn: false, error: false }

    constructor(props) {
        super(props);
    }

    handleSubmit() {
        var email = document.getElementById('email').value;
        var password = document.getElementById('password').value;
        firebase
            .auth()
            .signInWithEmailAndPassword(email, password)
            .then(() => document.getElementById('close').click())
            .catch(e => console.log(e));

       if(firebase.auth().currentUser === null)
            this.setState({ loggedIn: false, error: true });
       else
            this.setState({ loggedIn: true, error: false});
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                { this.state.error && <span>Could not log in.</span> }
                { this.state.loggedIn && <Redirect to='/questions' /> }
                <FormControl
                    id="email"
                    type="email"
                    label="Email address"
                    placeholder="Enter email"/>
                <FormControl id="password" label="Password" type="password"/>
                <Button type="submit">Zaloguj</Button>
            </form>
        )
    }
}

Paolo Dell'Aguzzo · Accepted Answer · 2018-06-08 14:55:27Z

I think that you don't have understand how React works.

First of all you don't have to use "document.getElementById('email').value", because React works using state and props.

After that you cannot pass a component to the onClick event handler. The onClick wants a function.

If you want to redirect user you can create a method like:

loginUser(){
    window.location = "https:..";
}

Your button will be:

<Button onClick={this.loginUser.bind(this)}>Zaloguj</Button>

However when you work with React is really difficult that you need redirects. Seeing your components it seems like you want to handle React in the PHP way (Login component cannot read data with getElementById in the ComponentDidMount method. You have to use react-router for the app routing and you can use something like MobX or Redux to store user login data. You can even pass props and not use MobX or Redux).

I'm used to working with Express so that's where most of my thinking comes from

Collectives™ on Stack Overflow

Redirecting onClick

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related