Lesson 3: Handling Success Feedback

File Path: ContactUsForm\src\component\SuccessFormSubmission.jsx

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAnglesLeft } from "@fortawesome/free-solid-svg-icons";
import { Player } from "@lottiefiles/react-lottie-player";
import formSuccessAnimation from "../assets/success.json";

function FormSuccess({ onBack }) {
  return (
    <div>
      {" "}
      <div className="success-box flex flex-col justify-center items-center p-8">
        <Player
          autoplay
          speed={0.6}
          src={formSuccessAnimation}
          keepLastFrame
          style={{ height: 150, width: 150 }}
        />

        <span className="text-lg text-center thankyou-text">
          Thank you for submitting the form
        </span>

        <button onClick={onBack} className="back-btn mt-7">
          <span className="text-xl">Back</span>
          <FontAwesomeIcon
            icon={faAnglesLeft}
            className="relative left-2 text-lg"
          />
        </button>
      </div>
    </div>
  );
}

export default FormSuccess;

Explanation:

1. Lottie Animation (Player component)

In this code, the success.json file contains the animation data for the form submission success. You can download it from LottieFiles (https://lottiefiles.com/) by searching for a suitable animation and exporting/downloading it as a JSON file.

• Once downloaded, place it in your project’s assets folder and import it into your component.

• The Player component (<Player/>) from @lottiefiles/react-lottie-player is used to display the animation.

• It accepts attributes such as autoplay to start automatically, speed to control the playback speed, src to point to the JSON file, keepLastFrame to retain the final frame, and style to set the animation's height and width.

• These props give you full control over how the animation appears in your interface.

2. FontAwesome Icon (FontAwesomeIcon)

We use the FontAwesomeIcon component to display vector icons easily in React. Here, faAnglesLeft is imported from FontAwesome’s free solid icons and added to the button to visually indicate “back,” giving a clean, professional look without extra images.

3. Passing Callback Function (onBack) / Lifting State Up

The parent form component passes the onBack function as a prop to the child FormSuccess component. When the back button is clicked, this function runs, letting the parent reset the form and hide the success message.

This way, the child can communicate with the parent, which is called “lifting the state up,” keeping the main state centralized and easy to manage.