How to pass a data one Component to Another Components After Form Submit - reactjs

Question

In this code, I want to get my user email in Login Component after submitting the Registration Component.
Component: Registration
import React, { useState } from 'react';
import { Button, Container, Form,Row,Col } from 'react-bootstrap';
import { useNavigate,Navigate } from 'react-router-dom';
const Register = () => {
const [data,setData] = useState({
'first_name': 'dfdf',
'last_name': '',
'email': 'maruf#mail.com',
'password': '',
'password_confirm': ''
})
let navigate = useNavigate();
const handleInputChange = (e) => {
setData({
...data,
[e.target.name]: e.target.value,
});
};
const handleSubmit = (e) => {
e.preventDefault();
console.log(data);
navigate('/login',{replace:true,state:{email:data.email}});
}
return <>
<Container fluid={'md'}>
<Row>
<Col xs={6}>
<Form onSubmit={handleSubmit}>
<Form.Group className="mb-3" controlId="formBasicFirstName">
<Form.Label column >First Name</Form.Label>
<Form.Control name='first_name' value={data.first_name} onChange={handleInputChange} type="text" placeholder="First Name" />
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicLastName">
<Form.Label>Last Name</Form.Label>
<Form.Control name='last_name' value={data.last_name} onChange={handleInputChange} type="text" placeholder="Last Name" />
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control name='email' value={data.email} onChange={handleInputChange} type="email" placeholder="Enter email" />
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control name='password' value={data.password} onChange={handleInputChange} type="password" placeholder="Password" />
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword_Confirm">
<Form.Label>Password</Form.Label>
<Form.Control name='password_confirm' value={data.password_confirm} onChange={handleInputChange} type="password" placeholder="Confirm Password" />
</Form.Group>
<Button variant="primary" type='submit' onSubmit={handleSubmit} >Register</Button>
</Form>
</Col>
</Row>
</Container>
</>;
};
export default Register;
here I want to send the user email address after done the registration then send the data into the Login Components.
Component: Login
React, { useEffect, useState } from "react";
import { Button, Col, Container, Form, Row } from "react-bootstrap";
import { useLocation } from "react-router-dom";
import { Navigate, useNavigate } from "react-router-dom";
const Login = () => {
const [data,setData] = useState({
email: "",
password: "",
});
const uselocation = useLocation();
if (uselocation.state) {
if (uselocation.state.email) {
setData({
...data,
email: uselocation.state.email,
});
}
}
const handleSubmit = (e) => {
e.preventDefault();
console.log(data);
};
return (
<>
<Container fluid={'md'}>
<Row>
<Col xs={6}>
<Form onSubmit={handleSubmit}>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
</Col>
</Row>
</Container>
</>
);
};
export default Login;
after a navigate to login Component I got this error
Uncaught Error: Too many re-renders. React limits the number of
renders to prevent an infinite loop.

Answer 1

Wrap setData from Login component with useEffect and add location as a dependency.