[ Reactjs ] Radio button event with sweetalert (https://codesandbox.io/s/radiobuttonwithsweetalert-x0d6l)

First.js

import React from "react";
import "./Style.css";
import swal from 'sweetalert';

class First extends React.Component {
    constructor() {
      super();
      this.state = {
          size: 'small'
      };
    }
    
    handleChange = (event) => {
      this.setState({ size: event.target.value });
    }
    
    handleSubmit = (event) => {
      event.preventDefault();
      
      swal({
        title: "Success",
       text: (`You chose the ${this.state.size} pizza.`),
       icon: "success",
       dangerMode: false,
   })
      
    //   alert(`You chose the ${this.state.size} pizza.`);
      console.log("Pizza Size", this.state.size)
    }
  
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
          <p className="title">Select a pizza size:</p>
          
          <ul>
            <li>
                <label>
                  <input
                    type="radio"
                    value="small"
                    checked={this.state.size === "small"}
                    onChange={this.handleChange} />Small
                </label>
            </li>
            
            <li>
                <label>
                    <input 
                      type="radio"
                      value="medium"
                      checked={this.state.size === "medium"}
                      onChange={this.handleChange} />Medium
                </label>
            </li>
  
            <li>
                <label>
                    <input
                      type="radio"
                      value="large"
                      checked={this.state.size === "large"}
                      onChange={this.handleChange} />Large
                </label>
            </li>
          </ul>
  
          <button type="submit" className="submit-button">Make your choice</button>
        
        </form>
      );
    }
}
  
export default First;

Style.css

body {
    font-family: "Roboto";
    background-color: #1976d2;
  }
  
  form {
    max-width: 185px;
    background-color: #fff;
    margin: 0 auto;
    margin-top: 20px;
    padding: 20px;
  }
  
  ul {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
  }
  
  label {
    display: flex;
    align-items: center;
  }
  
  .title {
    font-weight: bold;
    font-size: 18px;
  }
  
  .submit-button {
    border: 0;
    font-family: inherit;
    font-size: inherit;
    outline: none;
    cursor: pointer;
    background-color: #7e57c2;
    color: #fff;
    padding: 10px 30px;
    border-radius: 5px;
  }
  
  .submit-button:hover {
    background-color: #673ab7;
  }
  
  .submit-button:active {
    transform: translateY(1px);
  }