How to pass the API response data to another react page - reactjs

Question

Hi I have created a login page using React-Typescript. User login with username and password then click the submit button HttpPost Request call to my backend. If my response status succeeded. My response information back to return my React application. That response data i need store and pass the data to another page. That page call the get request. in that getrequest parameter i will send the response data.
For ex:
User successfully logged in. Backend send to the response(userId,userName). Then Redirect the Home page.
My home page have Httpget request(fetch("http:localhost:8080/api/getuser"). I need to pass the userId and userName in http request like(fetch("http:localhost:8080/api/getuser?userId="+userId"&userName="+userName)
Login tsx file:
import React from 'react';
import { Redirect } from 'react-router-dom';
import { SyntheticEvent, useState } from 'react';
import { Link } from 'react-router-dom';
const { REACT_APP_API_ENDPOINT } = process.env;
const Login = (props: { setName: (name: string) => void }) => {
const [userName, setuserName] = useState('');
const [userid, setuserId] = useState('');
const [password, setPassword] = useState('');
const [redirect, setRedirect] = useState(false);
const submit = async (e: SyntheticEvent) => {
e.preventDefault();
const response = await fetch(`${REACT_APP_API_ENDPOINT}/login`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
credentials: 'include',
body: JSON.stringify({
userName,
password
})
});
const content = await response.json();
console.log(content);
setRedirect(true);
props.setName(content.userName);
setuserId(content.userId);
console.log(content.userId);
}
if (redirect) {
return <Redirect to="/" />
}
return (
<div>
<form onSubmit={submit} className="form-signin">
<h1 className="h3 mb-3 fw-normal">Please sign in</h1>
<div>
<input type="userName" className="form-control" placeholder="UserName" required
onChange={e => setuserName(e.target.value)} />
</div>
<div>
<input type="password" className="form-control" placeholder="Password" required
onChange={e => setPassword(e.target.value)} />
</div>
<button className="w-100 btn btn-lg btn-primary" type="submit">Log in</button>
</form>
</div>
);
};
export default Login;
App tsx file
import React, { Component } from 'react';
function Home() {
const { REACT_APP_API_ENDPOINT } = process.env;
const [name, setName] = useState('');
const [id, setId] = useState('');
useEffect(() => {
(
async () => {
const response = await fetch(`${REACT_APP_API_ENDPOINT}/getuser`, {
headers: { 'Content-Type': 'application/json' }
})
.then(function (response) {
console.log(response);
})
const content = await response;
//setName(content.name);
}
)();
});
return ();
export default Home;

Answer 1

There can be multiple ways of passing data from one component to another :
Using Props. You can use props to pass data from parent to child component. ...
|--- App.js
|---- ParentComponent
|----ChildComponent
Using React ContextAPI or State management library like Redux. ...
Using Props as Callback Function.
<Link
to={{
pathname: "/page",
data: data // your data array of objects
}}
>
//in /page
render() {
const { data } = this.props.location
return (
// render logic here
)
}

Answer 2

Okay. So, you want to send userId and userName from your Login component to Home component? You can send props from Login component via Redirect and access these props in Home component using useLocation hook.
//Login.jsx
<Redirect
to={{
pathname: "/",
state: { userId, userName }
}}
/>
//-------------------------------------
//App.jsx
import { useLocation } from 'react-router-dom';
const location = useLocation();
const { userId, userName } = location.state;