Different way to apply success or Error msg in react js

Here are six different ways to show a success message after handling form submission in React.js:

Using state

import React, { useState } from 'react';

function MyForm() {
  const [success, setSuccess] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();

    // Perform form submission logic

    setSuccess(true);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        {/* Form fields */}
        <button type="submit">Submit</button>
      </form>
      {success && <p>Form submitted successfully!</p>}
    </div>
  );
}


export default MyForm;

Using Conditional Rendering


import React, { useState } from 'react';

function MyForm() {
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();

    // Perform form submission logic

    setSubmitted(true);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        {/* Form fields */}
        <button type="submit">Submit</button>
      </form>
      {submitted ? <p>Form submitted successfully!</p> : null}
    </div>
  );
}

export default MyForm;

Using Css classes and state



import React, { useState } from 'react';
import './MyForm.css';

function MyForm() {
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();

    // Perform form submission logic

    setSubmitted(true);
  };

  return (
    <div>
      <form className={submitted ? 'submitted' : ''} onSubmit={handleSubmit}>
        {/* Form fields */}
        <button type="submit">Submit</button>
      </form>
      {submitted && <p className="success-msg">Form submitted successfully!</p>}
    </div>
  );
}

export default MyForm;

Css

.submitted {
  opacity: 0.5;
}

.success-msg {
  color: green;
}

Using React Toast Library


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

function MyForm() {
  const handleSubmit = (e) => {
    e.preventDefault();

    // Perform form submission logic

    toast.success('Form submitted successfully!');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        {/* Form fields */}
        <button type="submit">Submit</button>
      </form>
      <ToastContainer />
    </div>
  );
}

export default MyForm;

=======================OR=====================

=================OR========================

Using Modal/Popup Component

import React, { useState } from 'react';
import Modal from 'react-modal';

function MyForm() {
  const [isOpen, setIsOpen] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();

    // Perform form submission logic

    setIsOpen(true);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        {/* Form fields */}
        <button type="submit">Submit</button>
      </form>
      <Modal isOpen={isOpen} onRequestClose={() => setIsOpen(false)}>
        <h2>Success!</h2>
        <p>Form submitted successfully!</p>
      </Modal>
    </div>
  );
}

export default MyForm;

Using Redirect to Success Page

import React, { useState } from 'react';
import { Redirect } from 'react-router-dom';

function MyForm() {
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();

    // Perform form submission logic

    setSubmitted(true);
  };

  if (submitted) {
    return <Redirect to="/success" />;
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        {/* Form fields */}
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default MyForm;

Success.js

import React from 'react';

function Success() {
  return (
    <div>
      <h1>Success Page</h1>
      <p>Your form was submitted successfully!</p>
    </div>
  );
}

export default Success;

=================OR=============================

import React, { useState } from 'react';
import { Redirect } from 'react-router-dom';

function MyForm() {
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();

    // Perform form submission logic
    // For example, sending a POST request to an API
    const formData = {
      // Form data to be submitted
      // ...
    };

    // Assuming you are using fetch for the API request
    fetch('https://api.example.com/submit', {
      method: 'POST',
      body: JSON.stringify(formData),
      headers: {
        'Content-Type': 'application/json'
      }
    })
      .then(response => {
        if (response.ok) {
          // Form submission successful
          setSubmitted(true);
        } else {
          // Form submission failed
          console.log('Form submission failed');
        }
      })
      .catch(error => {
        // Handle error if the API request fails
        console.error('API request failed:', error);
      });
  };

  if (submitted) {
    return <Redirect to="/success" />;
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        {/* Form fields */}
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default MyForm;

Success.js

import React from 'react';

function Success() {
  return (
    <div>
      <h1>Success Page</h1>
      <p>Your form was submitted successfully!</p>
    </div>
  );
}

export default Success;

Debug School

Different way to apply success or Error msg in react js

Top comments (0)