Add Material Icon in React-Toastify Message

Question

This is the code defined in one folder. I am tring to add the material Icon in this. But it is showing the error

React' must be in scope when using JSX

import { toast } from 'react-toastify';
import ErrorIcon from '@material-ui/icons/Error';

const Alert = (type, message) => {
    switch (type) {
        case 'warning':
            return toast.warning(message)
        case 'error':
            return toast.error(<div><ErrorIcon/> {message}</div>) // look this line
        case 'success':
            return toast.success(message)
        case 'info':
            return toast.info(message)
        case 'dark':
            return toast.dark(message)
        default:
            return toast(message)
    }
}
export default Alert;

Accessing the code like this...

import Alert from '../utils/toster.js';

Alert('error', 'Try Again')

Answer 1

Please import react on top of your file that used JSX.

import React from 'react'