Material ui Snackbar show only once and doesn't reopen

Question

I'm using the Snackbar component from the Material-UI framework but I can't make it work correctly because the Snackbar shows only the first time, from the second message the Snackbar remain closed.

Here is the code I used to wrap the Snackbar:

import Snackbar from "@material-ui/core/Snackbar";
import { useState } from "react";

export default function Notification({ message }) {

    const [value, setValue] = useState(message);

    return (
         { console.log('snackbar closed'); setValue('') }}
        />
    )
};

I use this component to show the result when the user submit a form. For example when the submit is succesful the message 'operation completed' is shown, but if the server doesn't validate the submission a message error is shown. Here is the code:

function InnerForm({ mode, detail, entity }) {

  const isCreateMode = mode === 'create';
  const schema = createSchema(entity);

  const {
    handleSubmit,
    formState: { errors },
    control,
    setValue
  } = useForm({
    defaultValues: detail,
    resolver: yupResolver(schema)
  });

  const [submitResponse, setSubmitResponse] = useState();

  const onSubmit = async data => {

    const operation = isCreateMode ?
      entity.Client.create(data) :
      entity.Client.update(data);

    const response = await operation;

    setSubmitResponse(response);
    console.log(response);

    if (response.success) {

      if (isCreateMode) {
        const autoField = entity.Fields.find(({ auto }) => auto);

        if (autoField) {
          setValue(autoField.id, response.content[autoField.id]);
        }
      }
    }
  };

  return (
    <>
      {
        submitResponse ?
          submitResponse.success ?
             :
            submitResponse.problem ?
               :
              
          : null
      }
      
        {
          entity.Fields.map(field => {
            const props = {
              control,
              id: field.id,
              label: field.label,
              error: errors[field.id]?.message,
              multiline: field.type === 'text',
              loadOptions: field.loadOptions,
              getOptionLabel: field.getOptionLabel,
              readonly: submitResponse?.success || field.auto || (field.key && !isCreateMode)
            };

            const Component =
              field.type === 'string' ? TextInput :
                field.type === 'datetime' ? DatetimeInput :
                  field.type === 'text' ? TextInput :
                    field.type === 'entity' ? SelectInput :
                      field.type === 'bool' ? CheckboxInput :
                        TextInput;

            return 
          })
        }

The test I do is the following:

First, I compile the form with invalid data and execute the submit => Ok, the snackbar appear with an error message.
Second, I correct the data and execute a new submit => The submit is succesful, but the success message is not shown

user_12859233 · Answer

It does not look like you're updating state once it receives new props, only initializing the state the first time it's created.

You could try to update state when it's called a second time.

You could also keep the open state inside the InnerForm component, and add a callback function as a parameter to Notification that would be called in onClose that would update the state of the Snackbar inside InnerForm

Example of the second suggestion:

In InnerForm

const [isOpen, setIsOpen] = useState(false);
const [message, setMessage] = useState(message);

const callback = () => {
    setValue(false)
}

// In render() you need to add this line.

In Notification

export default function Notification({ message, isOpen, onClose }) {

return (
    
)
};

Finally, you just have to update message and isOpen in InnerForm where you currently call the Notification function

Material ui Snackbar show only once and doesn't reopen

1 Answers