G
G
GreatX2020-04-22 18:22:53
Bootstrap
GreatX, 2020-04-22 18:22:53

How to make a pop up toast?

Hello
I want a message to pop up from the server in case of an error

Here is Tost

const [show, setShow] = useState(false);

<Toast onClose={() => setShow(false)} show={show} delay={3000} autohide>
      <Toast.Body>text</Toast.Body>
</Toast>


And here's how I want to use it
import { useCallback, useState } from "react";
import { Toast } from "react-bootstrap";

export const useMessage = () => {
   const [show, setShow] = useState(false);

  return useCallback((text) => {
    if (text) {

      <Toast onClose={() => setShow(false)} show={show} delay={3000} autohide>
           <Toast.Body>text</Toast.Body>
      </Toast>
    }
  });
}

What the console outputs
Line 8:9: Expected an assignment or function call and saw instead an expression no-unused-expressions
Line 8:9: 'React' must be in scope when using JSX react/react-in-jsx-scope
Line 9:7: 'React' must be in scope when using JSX react/react-in-jsx-scope

Search for the keywords to learn more about each error.

Here I call
const message = useMessage();
  useEffect(() => {
    message(error);
    clearError();
  }, [error, message, clearError]);

Answer the question

In order to leave comments, you need to log in

1 answer(s)
R
real2210, 2020-04-22
@real2210

import React from 'react';

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question