How to display a popup modal in React and getForms.io

Question

I am having a problem in displaying a popup when subbmitting a data to getForms. It executes the data but i cannot display the modal. I need help.

`

import axios from'axios'
import {React ,useState} from 'react'
import { useForm} from 'react-hook-form'
import Modal from '../../Modal'

export default function ContactForm(){
  const [serverState , setServerState] = useState({submitting: false, status: null})
  const handleServerResponse = (ok, msg, form) => {
    
    setServerState({ submitting: false, status: { ok, msg } })
    
    if(ok){
      console.log('msg')//THIS WORKS!!
      <Modal/>//THIS DOESNT WORK!!
)
      return 
    }
    return
  }
  

  const { register, handleSubmit, watch, formState: { errors } } = useForm()
  const onSubmit = (data,e) =>{
    const formData = new FormData()

    for(var field in data){
      formData.append(field, data[field])
    }

    setServerState({submitting:true})

    axios({
      method:'post',
      url:'https://getform.io/f/79e16760-4dbb-4e67-b212-c98e3f1b8eda',
      data: formData
  
    })

    .then((r) => {
      e.target.reset();
      handleServerResponse(true, "Form Submitted",e)
    })
    .catch((r) => {
      handleServerResponse(false, r.response.data.error, e);
    })


  }
  
  return(
     <section>
         
        <form 
          onSubmit={handleSubmit(onSubmit)}
          className='mt-5 gap-4 text-black flex flex-col'
          >
      
            <input className='pl-2 rounded-sm focus:outline-none' type='text' placeholder='Enter yourName' {...register("fullname")}/>
            <input className='pl-2 rounded-sm focus:outline-none' type='email' placeholder='Enter your Email' {...register("email")}/>
            <textarea className='pl-2 pt-2 rounded-sm focus:outline-none' rows={10} placeholder='Enter your Message'{...register('emailMessage')}/>
            <input className=' text-white drop-shadow-lg rounded-lg bg-tertiary p-2 mx-auto' type='submit'/>
           </form>
     </section>
      
 )
}

`

Im expecting a popup after the data was submitted or not submitted. it do works in console.log but not in React Component.

const [serverState , setServerState] = useState({submitting: false, status: null}) const handleServerResponse = (ok, msg, form) => {

setServerState({ submitting: false, status: { ok, msg } })

if(ok){
 //console.log() works!!!!!
 //React Component not working!!!!
  return 
}

//Same HERE!!
return

}

Answer 1

How do you find out that the React code is not working? It is not visible from the code you share. I only see the Modal import, but not its usage. Try logging inside the React component to see if it is rendered and if it is, then try increasing the z-index of the modal, so you can see it.

Ok, with your Modal added to the code I see two errors here, first you don't even return the Modal from this function and second, if you return it, you don't expect it anywhere in your code. Try to render the Modal conditionally in your section instead, like this:

    return(
         <section>
             {showModal && (
               <Modal />
             )}
            <form 
              onSubmit={handleSubmit(onSubmit)}
              className='mt-5 gap-4 text-black flex flex-col'
             >
               ...
           </form>
         </section>
    )

Then add showModal variable into state like this:

const [showModal, setShowModal] = useState(false);

And finally change the handleServerResponce function like this:

if(ok){
      console.log('msg')//THIS WORKS!!
     setShowModal(true);
)

You will have to add close modal logic into your Modal after that.

And here is how the whole component will look like when you add also logic for passing the message to the modal:

import axios from'axios'
import {React, useState} from 'react'
import { useForm} from 'react-hook-form'
import Modal from '../../Modal'

export default function ContactForm(){
  const [serverState , setServerState] = useState({submitting: false, status: null})
  const [showModal, setShowModal] = useState(false);

  const handleServerResponse = (ok, msg, formData) => {
    
    setServerState({ submitting: false, status: { ok, msg } })
    
    if(ok){
      console.log('msg')//THIS WORKS!!
      setShowModal(true);
)
      return 
    }
    return
  }
  

  const { register, handleSubmit, watch, formState: { errors } } = useForm()
  const onSubmit = (data,e) =>{
    const formData = new FormData()

    for(var field in data){
      formData.append(field, data[field])
    }

    setServerState({submitting:true})

    axios({
      method:'post',
      url:'https://getform.io/f/79e16760-4dbb-4e67-b212-c98e3f1b8eda',
      data: formData
  
    })

    .then((r) => {
      e.target.reset();
      handleServerResponse(true, "Form Submitted", r);
    })
    .catch((r) => {
      handleServerResponse(false, r.response.data.error, e);
    })


  }
  
  return(
     <section>
         {showModal && (
           <Modal message={serverState.status ? serverState.status.msg : ""} />
         )}
        <form 
          onSubmit={handleSubmit(onSubmit)}
          className='mt-5 gap-4 text-black flex flex-col'
          >
      
            <input className='pl-2 rounded-sm focus:outline-none' type='text' placeholder='Enter yourName' {...register("fullname")}/>
            <input className='pl-2 rounded-sm focus:outline-none' type='email' placeholder='Enter your Email' {...register("email")}/>
            <textarea className='pl-2 pt-2 rounded-sm focus:outline-none' rows={10} placeholder='Enter your Message'{...register('emailMessage')}/>
            <input className=' text-white drop-shadow-lg rounded-lg bg-tertiary p-2 mx-auto' type='submit'/>
           </form>
     </section>
      
 )
}