After submit the form how do I redirect to welcome component in React

Question

After submit the form in login.js, I would like to redirect to Welcome.js. I am new to React.

Login.js

class Login extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            email : "",
            password : ""
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    handleChange(e){
        this.setState({
            ...this.state, [e.target.name] : e.target.value
        })
    }

    handleSubmit(e){
        e.preventDefault()
        alert("wow")
        this.setState({
            email : '',
            password : ''
        })
    }


    render(){
        console.log(this.state)
        return(
            <form onSubmit={this.handleSubmit}>

                <input 
                placeholder = "email"
                type = "text"
                name = "email"
                value = {this.state.email}
                onChange = {this.handleChange}
                />

                <input 
                placeholder = "password"
                type = "password"
                name = "password"
                value = {this.state.password}
                onChange = {this.handleChange}
                />

                <button 
                type="submit"
                >Log in</button>

            </form>
        )
    }
}

export default Login;

Welcome.js

import React from 'react'

const Welcome = () => {
    return(
        <div>
            <h2>Welome</h2>
        </div>
    )
}

export default Welcome;

Answer 1

You may also conditionally display different component depending on state.

Below, I added a new "submitted" state, and set it to true when submitted. And I conditionally return different component base on the "submitted" state;

if (this.state.submitted) return <Welcome />

your modified code

class Login extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            email : "",
            password : "",
            submitted: false
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    handleChange(e){
        this.setState({
            ...this.state, [e.target.name] : e.target.value
        })
    }

    handleSubmit(e){
        e.preventDefault()
        alert("wow")
        this.setState({
            email : '',
            password : '',
            submitted: true
        })
    }


    render(){
        console.log(this.state)
        if (this.state.submitted) return <Welcome />

        return(
            <form onSubmit={this.handleSubmit}>

                <input 
                placeholder = "email"
                type = "text"
                name = "email"
                value = {this.state.email}
                onChange = {this.handleChange}
                />

                <input 
                placeholder = "password"
                type = "password"
                name = "password"
                value = {this.state.password}
                onChange = {this.handleChange}
                />

                <button 
                type="submit"
                >Log in</button>

            </form>
        )
    }
}

export default Login;

Answer 2

That is where React Router comes in, you can programmatically navigate in your app

npm i react-router-dom

Then use it to navigate after anything. An example:

    import { useHistory } from "react-router-dom";

    let history = useHistory(); 
    
    handleSubmit(e){
        e.preventDefault()
        alert("wow");
        history.push("/welcome")
        this.setState({
            email : '',
            password : ''
        });

    }