I encountered an unexpected custom error while trying to implement custom error notifications in my form. The custom context I set up for this functionality does not seem to be working as intended, resulting in a thrown error for its non-existence. My development environment consists of Next.js and TypeScript.
To address this issue, I have created a NotificationProvider component that handles the state of notification messages. It utilizes React Context API to provide a central storage for error messages. Below is the code snippet:
"use client"
import React, { useContext } from 'react'
import { Notification } from "../components/Notification"
import { AlertColor } from '@mui/material';
type ContextProperties = {
getError: (msg: string) => void,
}
// Rest of the code has been omitted for brevity
In addition, I've included the usage of the context within my Home component:
"use client"
import { Button, Container, Grid } from '@mui/material'
import Typography from '@mui/material/Typography'
import Image from "next/image";
import Link from 'next/link'
import { useNotification } from './context/notification.context'
// Rest of the code has been omitted for brevity
</Grid>
<Grid item>
<Button variant='contained' type="button" onClick={handleClick}>Test Notification</Button>
</Grid>
</Grid>
</Container>
</>
)
}