根据渲染外部条件调用 React toastify

Question

I'm trying to make a notification system in react, where I use the react-toastify system

So far I have a socket connection (with socket.io ) connected to my server, which sends a response to the client whenever a notification occurs.

const {endpoint} = this.state
            const socket = socketIOClient(endpoint);
            console.log("created")
            socket.on('updatelogs', data =>
            this.setState({logs: data}, 
            () => createNotification(data.pop().log.level, data.pop().log.message))) // here i use a callback to create the notification
          }

I have a logging system, where I take the last log added to the stack and pass that on based on the attributes inside that.

Inside my createNotficiation function I have some dummy logic like this.

export const createNotification = (level, message) =>{ 
    switch (level) {
            case 'info':
              return toast('info')
            case 'success':
              return toast("success");
            case 'warning':
              return toast("warning");
            case 'error':
              return toast("error");
          }
        }

Here I want to call toast based on what is passed in, but nothing renders. I have tried with a simple alert which works fine.

Here is my configuration for the toasts

Inside App.js :

  render() {
    toast.configure();
    return (
      <div className="App">
          <NewComponent
          name={this.state.name} handleChange={this.setNameHandler}
          preproccessHandler={this.setPreprocessHandler} isPreproccess={this.state.isProcessedData} 
          hasProcessedDBScan={this.state.isProcessedDBScan} setProcessedHandler={this.setProcessedHandler} 
          validateFileHandler={this.validateFileHandler}  isUploadedFiles={this.state.isUploadedFiles}/>
          <ToastContainer />
      </div>

Answer 1

Try to render a div instead of toast with background-color as red and width as 200px.