0

I want a popup alert when the user interacts with a radio button. I have the relevant code below. When I select a radio button, I do get the console message but no pop-up. What am I doing wrong here?

import {Toastify, toast} from "react-toastify";
import "react-toastify/dist/ReactToastify.css";


let changeSettingsMain = (e) => {
    settings.label = e.target.id;
    window.localStorage.setItem("settings", JSON.stringify(settings));
    console.log("SAVED");
    toast.success("Saved!",{position: toast.POSITION.TOP_RIGHT});      
};


<ListGroup variant="flush" data-cy="label-choice">
            <ListGroup.Item className="settings-listgroup-item">
                <Form.Check
                    type={"radio"}
                    id={"ENGLISH"}
                    name="label_type"
                    label="Plain English labels"
                    defaultChecked={settings.label === "ENGLISH" ? true : false}
                    value={settings.label === "ENGLISH"}
                    onChange={changeSettingsMain}
                    style={{fontWeight: "bold", fontSize: "105%", paddingLeft: "35px"}}
                />
            </ListGroup.Item>
            ....
Bayley Sapara
  • 45
  • 4

1 Answers1

2

Inside your index.js file import the ToastContainer and css file and add in the return body then you will

import React from "react";
import "./index.css";
import App from "./App";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

ReactDOM.render(
  <React.StrictMode>
      <App />
      <ToastContainer />
  </React.StrictMode>,
  document.getElementById("root")
);

Hopefully it will fix your issue

Azeem Khan
  • 95
  • 5