I have a small problem. I have this fetch data in one ponent 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 ponent:

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 can I get the new data of the first ponent after using POST without reloading the web page?

I have a small problem. I have this fetch data in one ponent 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 ponent:

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 can I get the new data of the first ponent after using POST without reloading the web page?

• javascript
• reactjs

Share Improve this question Follow edited Apr 30, 2023 at 9:01 Youssouf Oumar 46.6k1616 gold badges103103 silver badges105105 bronze badges asked Jun 23, 2022 at 6:07 Javier PérezJavier Pérez 15111 silver badge88 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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 ponent that's making the POST request is a child of the ponent 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 ponent that's parent of all those ponents 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.