Material-UI snackbar on response?

Hey guys, I’m trying to implement snackbars from Material-UI to show a success or failure snackbar depending on the response of a database call. Here is an example of the pos request. How could I implement this instead of the alerts?

  // Admin — Create new art
  const postArt = async (title, year, medium, url, price) => {
    const artBody = {
      title: title,
      year: year,
      medium: medium,
      poster: url,
      price: price
    }
    const response = await fetch(`${API}/chizetteart`, {
      method: "POST",
      mode: "cors",
      cache: "no-cache",
      credentials: "same-origin",
      headers: {
        "Accept": "application/JSON",
        "Content-Type": "application/json",
        "token": token.token
      },
      body: JSON.stringify(artBody)
    })
    if (response.status !== 200) {
      alert(`Unable to create this masterpiece!`)
    } else {
      alert(`Art Created!`)
    }
    setArtList([artBody, ...artList])
  }

Not really sure what you mean, wouldn’t you just conditionally render the component(s) depending on the response?

Yeah, I think I’m just not really sure what has to happen here since all of the snackbars in their examples are based off of a button click. But I imagine it could be based off of state and close after a certain time?

Did you look at the example codesandbox they have? You can toggle the open prop using a Boolean and it has an autoHideDuration prop as well.

Super quick example. Ignore the sloppy code, it’s just an example.

Oh geez, so I should probably just put the logic right within this component? (It technically is a context). I was overthinking and trying to over-abstract again.

I don’t know how you should best implement it in your code. I was just showing the component usage. Try it out and see where it takes you.

Thank you very much, I might DM you later for a little more guidance if that is okay.

Sure, that’s fine. But just so you know, I’m not a React expert.

Ha! No worries at all.

So, this is where I’m at if anyone has any ideas, I’m trying to use the state in the context and then pass it down to the snackbar component. Just confused on where to implement the JSX here:

Context with fetching logic:

Snackbar Component:

Thanks to @lasjorg and anyone else who looked. I solved it by adding a brand new context for the Snackbar:

import React, {
  createContext,
  useState,
} from "react"

export const SnackbarContext = createContext()

export function SnackbarProvider(props) {

  // Snackbar State
  const [open, setOpen] = useState(false)
  const [severity, setSeverity] = useState("info")
  const [message, setMessage] = useState("")

  const handleClose = (event, reason) => {
    if (reason === "clickaway") {
      return
    }
  
    setOpen(false)
  }

  return (
    <SnackbarContext.Provider
      value={{
        open,
        setOpen,
        severity,
        setSeverity,
        message,
        setMessage,
        handleClose
      }}
    >
      {props.children}
    </SnackbarContext.Provider>
  )
}