I am new to React. I am building a chat app and use react-toastify to get some custom notifications. I am importing {ToastContainer, toast} from react-toastify. But when I use <ToastContainer/> inside in my component as it should be, The component doesn't render. In console, I have "Invalid hook calls" error messages.

CodePudding user response：

Have you added the css which belongs to the library?

 import 'react-toastify/dist/ReactToastify.css';

if not there is your solution.

in contrast if you did, please share the code inside the file.

It will be much easier to help with more info regarding the error

CodePudding user response：

There are three common reasons for getting such an error.

1. You might have mismatching versions of React and React DOM.
2. You might be breaking the Rules of Hooks.
3. You might have more than one copy of React in the same app.

Check out the ReactJS Library Platform for more Info.

CodePudding user response：

 import React from 'react';

  import { ToastContainer, toast } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
  
  function App(){
    const notify = () => toast("Wow so easy!");

    return (
      <div>
        <button onClick={notify}>Notify!</button>
        <ToastContainer />
      </div>
    );
  }