Creating a travel-related form using React with TypeScript. The initial component
TravelForm
utilizes multiple async-await requests within useEffect hook to update the state of the subsequent component
TravelGuideFields
However, the values of props are not being displayed in my TravelGuideFields component. Upon inspection with React dev tool, the state is correctly updated with new values, but it seems like the component is loading with old values. This could be due to the multiple async-await calls causing the component to render before obtaining the final result value. Is there an alternative way to ensure my components display the updated values?
Here is the first component where the multiple network calls are made within the effect hook:
import { FC, useEffect, useState } from "react";
import {
getOrderedbooks,
getOrderedSportsGears,
getOrderedTravelMaps
} from "../../httpRequests/TravelRequests";
import TravelGuideFields from "./TravelGuideFields";
const TravelForm: FC = () => {
// states
const [inputs, setInputs] = useState<TravelInputInterface>({
bookName: "",
bookPrice: 0.0,
runningShoeBrand: "",
runningShoeCost: 0.0,
mapType: "",
mapCost: 0.0,
});
useEffect(() => {
const resultInputs: TravelInputInterface = {
bookName: "",
bookPrice: 0.0,
runningShoeBrand: "",
runningShoeCost: 0.0,
mapType: "",
mapCost: 0.0,
};
const fetchBooks = async () => {
const res = await getOrderedbooks();
if (res !== undefined) {
resultInputs.bookName = res.BOOK_NAME;
resultInputs.bookPrice = res.BOOK_PRICE;
}
};
fetchBooks();
const fetchSportsGear = async () => {
const res = await getOrderedSportsGears();
if (res !== undefined) {
resultInputs.runningShoeBrand = res.SHOE_BRAND;
resultInputs.bookPrice = res.SHOE_PRICE;
}
};
fetchSportsGear();
const fetchTravelMaps = async () => {
const res = await getOrderedTravelMaps();
if (res !== undefined) {
resultInputs.mapType = res.MAP_TYPE;
resultInputs.mapCost = res.MAP_COST;
}
};
fetchTravelMaps();
console.log({ resultInputs });
setInputs(resultInputs);
}, []);
return <TravelGuideFormFields inputs={inputs} />;
};
default BlockchainConstantsForm;
//TravelGuideFields component
const TravelGuideFields: FC<any> = ({inputs}) => {
return (
<div>
<div class="books"><input value={inputs.bookName} disabled/>
<input value={inputs.bookPrice} disabled/></div>
<div class="maps"><input value={inputs.mapType} disabled/></div>
<div class="sports"><input value={inputs.runningShoe} disabled/></div>
</div>
)
}
export default TravelGuideFields
//TravelRequests (HTTP request generator file)
//Books
export const getOrderedbooks = async (): Promise<bookInterface | undefined> => {
const res = await get(
`${mainURL}/books`
);
if (res.status === 200) {
return res.data;
}
return undefined;
};
//SportsGear
export const getOrderedSportsGears = async (): Promise<sportsInterface | undefined> => {
const res = await get(
`${mainURL}/sports`
);
if (res.status === 200) {
return res.data;
}
return undefined;
};
//Travelmaps
export const getOrderedTravelMaps = async (): Promise<mapInterface | undefined> => {
const res = await get(
`${mainURL}/map`
);
if (res.status === 200) {
return res.data;
}
return undefined;
};