State not being updated with React's state hook?

Question

I am posting an image to my Cloudinary account and want to save the URL from the response in the imageUrl state. When console logging the response URL, it shows me the Cloudinary URL correctly but the setImageUrl doesn't seem to be working.

I have changed my Cloudinary details to 'dummy' for security reasons

import React, { useState } from "react";
import "./image.css";

function Image() {
  const [image, setImage] = useState("");
  const [imageUrl, setImageUrl] = useState("");
  const postDetails = async () => {
    const data = new FormData();
    data.append("file", image);
    data.append("upload_preset", "dummy");
    data.append("cloud_name", "dummy");
    const settings = { method: "POST", body: data };
    try {
      const fetchData = await fetch(
        "https://api.cloudinary.com/v1_1/dummy/image/upload",
        settings
      );
      const resData = await fetchData.json();
      console.log(resData.url);
      if (resData) {
        setImageUrl(resData.url);
        console.log("imageUrl", imageUrl);
      }
    } catch (e) {
      console.log(e);
    }
  };
  return (
    <>
      <div className="file-field input-field">
        <div className="btn #64b5f6 blue darken-1">
          <span>Uplaod Image</span>
          <input type="file" onChange={(e) => setImage(e.target.files[0])} />
        </div>
        <div className="file-path-wrapper">
          <input className="file-path validate" type="text" />
        </div>
      </div>
      <button
        className="btn waves-effect waves-light #64b5f6 blue darken-1"
        onClick={() => postDetails()}
      >
        Submit post
      </button>
    </>
  );
}

export default Image;

Answer 1

I see that in general there is nothing wrong with the logic. Check if if (resData) is really a true value. You can do it like that to be more sure about the value !! resdata orBoolean (resData), but keep in mind that an empty object or an empty array will be a truthy value.

If there is no error in try catch statement, and restData is a truthy value there is no chance thatsetImageUrl ()will not be working.

Answer 2

State update happens asynchronously, so when you call the setImageUrl state updater function, the state doesn't get updated immediately, first the entire postDetails function runs and then a re-render would take place (meaning your functional component gets called again) and this time the useState hook will return the updated value for the imageUrl state.

So your logic is correct, in the next render you would get the updated value which you can use in your JSX, but your expectation that the log would print the updated state immediately after the state updater is called is wrong.

Also, on a side note, you don't need to create a new function to pass it to onClick like this: onClick={() => postDetails()}, you can simply pass the postDetails function like this: onClick={postDetails} because you don't want to pass any arguments to the function, so creating a new function is unnecessary.