React-Toast | Custom push notification implementation | Notification library

You could try using the useParams hook:

Your production environment variables is missing REACT_APP_API_URL

Answering my own question:

Cause: Initialized the toast in all my components which was causing the issue. (Sidebar, Navbar, Main component, Footer) which is making that render 4 times.

Solution: Removing the toast initialization in all components and initialized it in the index.js solved my issue.

You didn't share the file where routes are, but if I understand when you change from /profile/1 to /profile/2 the component is not remounted. Maybe, you need using key atribute with param ID used in the route path to achieve that:

the problem is not with your React App or the your server, but its with your helmet configuration. Update your CORS configuration to provide a valid content security policy. For example

In your package.js file, there were some bugs.

Glancing at the react-toastify code you can see it’s using an event emitter pattern. The listens for events that get dispatched (or emitted) when you call toast.info. When it gets an event it updates its internal state (presumably) to show the message.

TLDR: They're communicating indirectly through the eventManager, which exposes methods for 1) dispatching events and 2) registering listeners for those events.

It's similar to the way an onclick handler works in the DOM.

Here's a very rudimentary implementation of the basic pattern: It just appends a div to the document each time the button is clicked. (This isn't React- or toastify-specific. But it demonstrates the core idea.)

Notice that the button's click handler doesn't know anything about what happens. It doesn't append the div. It just emits an event via the EventBus instance described below.

The EventBus class provides an on method to register a listener. These are often called addEventListener or addListener, or they have an event-specific name like onClick, onChange, etc., but they all do the same basic thing: register a function to be invoked in response to an event. (This class is essentially a dumber implementation of react-toastify's eventManager.)

The on method adds the provided handler to an internal array. Then, when an event is fired (via emit) it just iterates over the array invoking each one and passing in the event information.

The fact that your save function returns html has no effect right now, because you don't do anything with it. The clicked button executes a function and gets some html in return, it's useless :).

The actual, working flow could be:

1. Create a state variable that holds the additional html to render (or null if there's no additional html).
2. Modify your save function to, instead of returning the code, set this state variable accordingly.
3. Place this state variable within your returned html, so that setting it will result in actualy rendering the additional html.

The basic example is: