How to use ToastContainer properly?

Question

I am new to stackoverflow so I apologize if there are mistakes on "how to properly ask a question"? I am facing an issue with react-toastify in my reactJS app. I have a flight management system API created with spring-boot and it's working perfectly fine (tested with postman). I am firing an endpoint -> "passengers/signup" to post passenger/customer details. It's all working fine but I am getting a big tick of success when I click on create account through toast.success.it shows a big tick with success message.image

App.js

import React from 'react'
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
import Header from './components/Header'
import Showcase from './components/Showcase'
import Destinations from './components/Destinations'
import Footer from './components/Footer'
import Login from './components/Login.js'
import SignUp from './components/SignUp'
import Error from './components/Error'
import { Button, Container,Row, Col} from 'reactstrap';
import {ToastContainer, toast} from "react-toastify";

function App() {
  return (
      <div>
        <ToastContainer position="top-left"/>
      
    <BrowserRouter>
      <Header />
      <Routes>
      <Route path="/" element={<><Showcase /><Destinations /></>} />
        <Route path="/login" element={<Login />}/>
        <Route path="/passengers/signup" element={<SignUp />}/>
        <Route path="*" element={<Error />}/>
      </Routes>
      <Footer />
    </BrowserRouter>
    </div>
    
  );
}

export default App

signUp.js

// import React from 'react'
import React, { Fragment, useEffect, useState } from "react";
import { Button, Form, FormGroup, Input,Container } from "reactstrap";
import axios from "axios";
import base_url from "../api/apiURL";
import { toast } from "react-toastify";

const SignUp = () => {

  useEffect(()=>{

    document.title="SignUp"

  },[])

  const [passengers, setPassenger] = useState({});
  //form handler function
  const handleForm=(e)=>{
    console.log(passengers);
    postDatatoServer(passengers);
    e.preventDefault();
  }

  //function to post signup data of passenger to server
  const postDatatoServer=(data)=>{
    axios.post(`${base_url}/passengers/signup`,data).then(
      (response) =>{
        console.log(response);
        toast.success('SignUp Successful...please login!', {
          position: "top-right",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          });
      },(error)=>{
        console.log(error);
        toast.error('Error! Something went wrong...please try again!', {
          position: "top-right",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          });
        
      }

    )
  };
  
  return (
    <>
      <section className='showcase login'>
        <div className='showcase-overlay'>
          <Form className='form-control' onSubmit={handleForm}>
          <FormGroup>
                    
                    <Input type = "text" placeholder="Username" name="username" id="username" onChange={(e)=>{
                        setPassenger({...passengers,passengerUsername:e.target.value});
                    }}/>
                </FormGroup>
                <FormGroup>
                    <Input type = "text" placeholder="Email" id="email" onChange={(e)=>{
                        setPassenger({...passengers,email:e.target.value});
                    }}/>
                </FormGroup>
                <FormGroup>
                    <Input type = "password" placeholder="Password" id="password"
                    onChange={(e)=>{
                        setPassenger({...passengers,password:e.target.value});
                    }}/>
                </FormGroup>
            {/* <input
              type='password'
              name='password'
              id='password'
              placeholder='Confirm Password'
            /> */}
            <Button type='submit'>Create Your Account</Button>
            <Button type='reset'>Clear</Button>
          </Form>
        </div>
      </section>
    </>
   
  );
}

export default SignUp;

Am I not placing ToastContainer on a correct position or what is it I don't understand. Please help me with this as I am new to reactJS, thank you so much.

Answer 1

Please import toast style file.

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