How to make state update for two independent modules

Solution for How to make state update for two independent modules
is Given Below:

I am new to react and have been stuck on this problem for two days. When logging in you can choose client or merchant and are redirected to the appropriate place. I need to pass the data from the client side to the merchant side but although the client side updates when submitting in the input, the merchant side does not. Is there any way that this is possible even though the components have different routes? What I am trying to use is redux stores but that does not seem to be working.

src/client/FirstForm.js

import React, {createRef, useState} from "react";
import { useDispatch, useSelector } from 'react-redux'
import { addBird, incrementBird } from '../store/birds/birds';
import {connect} from 'react-redux';

function FirstForm() {

    const handleInputChange = (event) => {
        event.preventDefault();
        this.setState({
            prodDetails : event.target.value
        })
    }
    const [birdName, setBird] = useState('');
    const birds = useSelector(state => state.birds);
    const dispatch = useDispatch();

    const handleSubmit = event => {
        event.preventDefault();
        dispatch(addBird(birdName))
        setBird('');
      };

    return (
    <div className="input-container" id="subtitle-space">
    <input type="text"onChange={e => setBird(e.target.value)} value={birdName}/>
    <button type="submit" className="btn" onClick={handleSubmit}>
    </div>
    );   
}   

const mapStateToProps= state => {
    return {
        birds : state.birds
    }
}

const mapDispatchToProps = dispatch => {
    return {
        addBird: () => dispatch(addBird())
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(FirstForm);

src/merchant/Merchant.js

function Merchant(props) {

    const birds = useSelector(state => state.birds);
    const dispatch = useDispatch();

    return (
          <div className="placeholder">
            <h>{birds.map(bird => (<h>{bird.name} <br></br></h>))}</h>
          <div> )
           );
}

export default withRouter(Merchant);

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {Provider} from 'react-redux';
import { createStore } from 'redux';
import birdApp from './store/birds/birds';

const store = createStore(birdApp);

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: 
serviceWorker.unregister();

src/store/birds.js

import { combineReducers } from 'redux';
const ADD_BIRD = 'ADD_BIRD';
const INCREMENT_BIRD = 'INCREMENT_BIRD';

export function addBird(bird) {
  return {
    type: ADD_BIRD,
    bird,
  }
}

export function incrementBird(bird) {
  return {
    type: INCREMENT_BIRD,
    bird
  }
}

const defaultBirds = [
  {
    name: 'robin',
    views: 1,
  }
];

function birds(state=defaultBirds, action) {
  switch (action.type) {
    case ADD_BIRD:
      state.push(
        {
          name: action.bird,
          views: 1
        })
      return state
    case INCREMENT_BIRD:
      const bird = state.find(b => action.bird === b.name);
      const birds = state.filter(b => action.bird !== b.name);
      return [
        ...birds,
        {
          ...bird,
          views: bird.views + 1
        }
      ];
    default:
      return state;
  }
}

const birdApp = combineReducers({
  birds
});

export default birdApp;

Here also is my Client component src/client/client.js:

import React,{ useEffect } from 'react'; //for later security
import { withRouter } from 'react-router-dom';
import './Client.css';
import '../common/Button.css';
import '../common/TopBar.css';
import Boxes from './Boxes';
import FirstForm from './FirstForm';
import SecondForm from './SecondForm';
import ThirdForm from './ThirdForm';
import RequestNow from './RequestNow';



class Client extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
      }
    }
    render() {
    return(
        <div>
          {/* Request now button */}
          <RequestNow></RequestNow> 

          {/* Boxes in middle */}
          <Boxes></Boxes>

          {/* Request now first form */}
          <FirstForm></FirstForm>

          {/* Request now second form */}
          <SecondForm></SecondForm>

          <ThirdForm></ThirdForm>

        </div>
      )
    }
}


export default withRouter(Client);

This is the login form src/components/loginform/LoginForm.js

import React, {useState} from 'react';
import axios from 'axios';
import {API_BASE_URL, ACCESS_TOKEN_NAME} from '../../constants/apiContants';
import { withRouter } from "react-router-dom";
import "../../common/Button.css";
import "../../common/Security.css";

function LoginForm(props) {
    const [state , setState] = useState({
        email : "",
        password : "",
        successMessage: null,
        client : false,
        merchant : false
    })
    const handleChange = (e) => {
        const {id , value} = e.target   
        setState(prevState => ({
            ...prevState,
            [id] : value
        }))
    }
    const redirectToClient = () => {
        props.updateTitle('Client')
        props.history.push('/client');
    }
    const redirectToMerchant = () => {
        props.updateTitle('Merchant')
        props.history.push('/merchant');
    }
    const handleClient = () => {
        //Only select if client is unselected
        if(state.client === false) {
            state.client = true;
            state.merchant = false;

            document.getElementById("client").className = "left button-selected";
            document.getElementById("merchant").className = "right button-unselected";
        }
    } 
    const handleMerchant = () => {
        //Do nothing if merchant is already selected
        if(state.merchant === false) {
            state.merchant = true;
            state.client = false;
            
            document.getElementById("merchant").className = "right button-selected";
            document.getElementById("client").className = "left button-unselected";
        }
    } 
    const handleSubmitClick = (e) => {
        e.preventDefault();
        if(state.client === false && state.merchant === false) {
            props.showError('Please select client or merchant');
        }
        else {
        const payload={
            "email":state.email,
            "password":state.password,
        }
        axios.post(API_BASE_URL+'/user/login', payload)
            .then(function (response) {
                if(response.status === 200){
                    setState(prevState => ({
                        ...prevState,
                        'successMessage' : 'Login successful. Redirecting to home page..'
                    }))
                    localStorage.setItem(ACCESS_TOKEN_NAME,response.data.token);
                    if(state.client) {
                        redirectToClient();
                        }
                    else if(state.merchant) {
                        redirectToMerchant();
                    }
                    props.showError(null)
                }
                else if(response.code === 204){
                    props.showError("Username and password do not match");
                }
                else{
                    props.showError("Username does not exists");
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    }}
    const redirectToRegister = () => {
        props.history.push('/register'); 
        props.updateTitle('Register');
    }
    return(
        <div className="card col-12 col-lg-4 login-card mt-2 hv-center">
            <form>
                <div className="form-group text-left">
                <label htmlFor="exampleInputEmail1">Email address</label>
                <input type="email" 
                       className="form-control" 
                       id="email" 
                       aria-describedby="emailHelp" 
                       placeholder="Enter email" 
                       value={state.email}
                       onChange={handleChange}
                />
                <small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
                </div>
                <div className="form-group text-left">
                <label htmlFor="exampleInputPassword1">Password</label>
                <input type="password" 
                       className="form-control" 
                       id="password" 
                       placeholder="Password"
                       value={state.password}
                       onChange={handleChange} 
                />
                </div>
                <div className="form-check">
                </div>
                <div className="btnContainer" id="clientMerchButton">
                    <span id="client" class="left button-unselected"
                        onClick={handleClient}>
                    Client</span>

                    <span id="merchant" class="right button-unselected"
                        onClick={handleMerchant}>
                    Merchant</span>
                </div> <br></br> <br></br>
                <button 
                    type="submit" 
                    className="btn btn-primary"
                    id="loginSubmit"
                    onClick={handleSubmitClick}
                >Submit</button>
            </form>
            <div className="alert alert-success mt-2" style={{display: state.successMessage ? 'block' : 'none' }} role="alert">
                {state.successMessage}
            </div>
            <div className="registerMessage">
                <span>Dont have an account? </span>
                <span className="loginText" onClick={() => redirectToRegister()}>Register</span> 
            </div>
        </div>
    )
}

export default withRouter(LoginForm);

If this is the up-to-date code then you need to use handleSubmit for on button clicked as I cant see handleSubmit used anywhere. Also it would be better to use handleChange function on onChange.

 <div className="input-container" id="subtitle-space" onSubmit="handleSubmit">
    <input type="text"onChange={handleInputChange} value={birdName}/>
    <input type="submit" value="Send Request">
 </div>

And mapStateToProps and mapDispatchToProps are not required as you are already using useDispatch and useSelector