I have a small problem. I have this fetch data in one component which is working perfectly:
const [item, setItem] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
fetch("https://api/products")
.then((response) => response.json())
.then((data) => setItem(data))
.finally(() => setLoading(false));
}, []);
Then I have this POST in a different component:
const handleSubmit = async (e) => {
e.preventDefault();
try {
await fetch("https://api/products", {
method: "POST",
headers: { admin: "true", "Content-Type": "application/json" },
body: JSON.stringify(body),
});
} catch (error) {
console.log("error");
}
};
How I can get the new data of the first component after using POST without reloading the web page?
You need to be able to append that new data, body inside item array, means you need to call this setItem(prev => [...prev, body]) in your try-catch, something like:
const handleSubmit = async (e) => {
e.preventDefault();
try {
await fetch("https://api/products", {
method: "POST",
headers: { admin: "true", "Content-Type": "application/json" },
body: JSON.stringify(body),
});
setItem(prev => [...prev, body]); // here you add the new data
} catch (error) {
console.log("error");
}
};
Now how you would access this setItem function? Well if the component that's making the POST request is a child of the component where you have this line const [item, setItem] = useState([]), you could pass setItem as a props.
If it's not the case, either you move this const [item, setItem] = useState([]) inside a component that's parent of all those components and pass down what you need as props or use a state management solution like the context API.
You must call the function again when response is true. I mean your function when getting data.