React, set body style conditionally by adding a class related to a state

user_4431969 0
Viewed 63

I have the following, where I am trying to change the body style while the image is uploading (so the user knows it is uploading). How can I attach a class to the body while the image is uploading and then remove it once the image has uploaded?

const [uploadingImage, setUploadingImage] = useState(false)

    const uploadToFirebase = e => {
        e.preventDefault();
        if (image) {
          const storageRef = storage.ref(`${user1}/${tripid}/documents`);
          const imageRef = storageRef.child(image.name);
          
          setUploadingImage(true)
          imageRef.put(image)
            .then((url) => {
              alert("Successfully uploaded.");
              getFromFirebase();
              setUploadingImage(false)
            })
            .catch(e => setUploadingImage(false));
        } else {
          alert("Please upload an image first.");
        }
      };
reactjs javascript
1 Answers

You could use an useEffect, something like this:

useEffect(()=>{
  document.body.classList.toggle("image-uploading", uploadingImage);
},[uploadingImage])

Then add this in your css:

body.image-uploading{
  /* whatever style you want goes here*/
}
user_152886410
Related