How to display the message from controller (BE) in toast notification (toastify)

Question

Summary:

I am trying to display a message from controller (backend) in notification (toast) using (react-toastify). And then whenever i try to login (cliking the login button) with a wrong e-mail, a toast appears with a message that we can find in the controller file (exemple: 'User with email does not exist' or 'Please enter all fields') ...etc, the message may vary depending on the status or message ofcourse.

My code (Back):

back/controllers/user.js:

login: (req, res) => {
    const { email, password } = req.body

    if (!email || !password)
        return res.status(400).json({ message: 'Please enter all fields' })  <=== this is the message i want to display in toast.
    User.findOne({ email }, async (err, user) => {
        if (!user) {
            res.status(403).json({ message: 'User with email does not exist' })  <=== this is the message i want to display in toast.
            console.log('wrongmail');
        } else {
            const ismatch = await bcrypt.compare(password, user.password)
            if (ismatch) {
                console.log('ismatch');
                const token = signToken(user._id, user.role);
                res.cookie("access_token", token, { maxAge: 3600 * 1000, httpOnly: true, sameSite: true });
                return res.status(200).json({ isAuthenticated: true, role: user.role })
            } else {
                res.status(403).json({ message: 'Invalid password !' })  <=== this is the message i want to display in toast.
            }
        }
    })
},

My code (Front):

Front/src/views/Login/index.jsx:

import React, { useState } from 'react'
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

export default () => {
    const notify = () => toast("");   <=== What should i put here to be rendred?
    return (
        <div className="col-lg-6">
            <fieldset>
                <input value={email} onChange={(e) => setemail(e.target.value)} type="text" name="email" id="email" pattern="[^ @]*@[^ @]*" placeholder="Your Email" required />
            </fieldset>
            <fieldset>
                <input value={password} onChange={(e) => setpassword(e.target.value)} type="password" name="password" id="subject" placeholder="password" autoComplete="on" />
            </fieldset>
            <fieldset>
                <button type="submit" id="form-submit" className="main-button" onClick={notify}>Login</button>
                <ToastContainer />
            </fieldset>
          </div>
     )
}

I added the gist code in my Login/index.jsx that i found it here: https://fkhadra.github.io/react-toastify/installation, but i can't manage to find a way to call any of messages from controller file (BE) to render as i explained at first in summary.

score 0 · Answer 1 · answered Mar 22 '22 at 14:36

0

You should use the toast method inside the function where you get the response from BE. for example:

getUserDetails() {
//call backend here

try {
const data  = result_from_backend
toast.success('your toast message')
} catch (e) {
toast.error('show the error here');
}
}

answered Mar 22 '22 at 14:36

Arpit

467
1
8
18

Excuse me , i'm new in react, can you explain more? like where exactly use this code? – Ava Mar 22 '22 at 15:01
i am a new contributor to this site and new to react. Please take care in answering. thanks! – Ava Mar 22 '22 at 15:28
you need to call the backend controller method from the front end by making http requests. I suggest you to look at axios and learn how to make such requests first. after that, you can use toast as I mentioned before. – Arpit Mar 22 '22 at 15:34

How to display the message from controller (BE) in toast notification (toastify)

1 Answers1