How to open pop up modal when form submit sucessfully and hide pop after 2 mintues and redirect to a-CodePudding

Hello I want to open pop modal when i submit form if form is submit successfully then pop modal opens and hide that modal in 5 minutes and redirect to another page in react JS. How can I do this functionality. Please help to do this functionality. Below I am sharing my code.

On submission code:

 const handleSubmit = (e) => {
    e.preventDefault();
    let data = events;
    const headers = {
      // 'Content-Type': 'application/json',
      'Content-Type': 'multipart/form-data',
      //  'Authorization': token
    }
    console.log('fnn', data);
    let formData = new FormData()
    formData.append('name', data?.selectedNames.event_name)
    formData.append('email', '[email protected]')
    formData.append('start_date', data?.selectedDates.start_date)
    formData.append('end_date', data?.selectedDates.end_date)
    formData.append('city', data?.selectedCities.city)
    formData.append('state', data?.selectedCities.state)
    formData.append('event_size', data?.selectedEvents[0])
    formData.append('budget', data?.selectedBudgets)
    formData.append('type_of_event', "62982a548779cc4a00139ca2")
    //props.resetEvents();
    axios.post(apiUrl, formData, { headers: headers })
     
      .then(response => {
        const { data } = response
        console.log(data)
        if (data.status == '1') {
          history.push('/CreatingEvent');
          toast.success("Step 6 completed Successfully !");
        }
        else {
          toast.error("Something went wrong !");
          console.log(response.data);
          return
        }


      }).catch(error => {

        throw (error);
      });
  }

**Modal Code:**

    return(  
    <div>
       
       <section className="creating_event">
            <div className="container">
                <div className="crey8">
                    <a href="GetStarted" className="btn btn-primary" type="button">Easy Events is Creating Your Event</a>
                </div>
            </div>
       </section>

    </div>
    
    )

I am tried to call this by using onclick hook but not able to achieve desired result. I tried like this.

<div className="App">
    <h1>Popup Modal</h1>
    <button onClick={openModal}>Open Modal</button>
    {showModal ? <Modal setShowModal={setShowModal} /> : null}
</div>

CodePudding user response：

Use a state variable to control the visibility. Then listen for changes to that state variable. If it changes to true, start a setTimeout to then hide the modal. See CodeSandbox example.

Example

import { useEffect, useState } from "react";
import "./styles.css";

const modalDisplayTime = 1000; // 1 second

export default function App() {
  const [showModal, setShowModal] = useState(false);

  useEffect(() => {
    let timeout;
    if (showModal) {
      timeout = setTimeout(() => {
        setShowModal(false);
        // history.push('/newpage')
      }, modalDisplayTime);
    }
    return () => clearTimeout(timeout);
  }, [showModal]);

  const handleClick = () => {
    setShowModal(true);
  };

  return (
    <div className="App">
      <button onClick={handleClick}>Show Modal</button>
      {showModal && <div>This is the Modal</div>}
    </div>
  );
}