I am trying to send data into supabase, but when I send them it doesn't navigate to thank you page
Tags: webdev, javascript, react, database
Published: 2023-01-24 12:36:59

`
`import React from 'react'
import {useState} from 'react'
import {useNavigate} from 'react-router-dom'
import supabase from '../config/supabase'
import src from '../assets/figo.jpg'
import Select from 'react-select'

const Home = () => {
    const options=[
       
           { value:'tigolipa', label: 'Tigo lipa'},
           { value:'bank', label: 'bank'},
           { value:'paypal', label: 'PayPal'},
           {value:'banktransfer', label:'Bank Transfer'}
        
    ]
    const navigate = useNavigate()
    
    const handleChange=()=>{
        setisChecked(!isChecked);
    }
    const [isChecked, setisChecked]=useState(false);
    
    const [fname,setFname] = useState('')
    const [lname,setLname] = useState('')
    const [age,setAge] = useState('')
    const [email,setEmail] = useState('')
    const [phone,setPhone] = useState('')
    const [trans,setTrans] = useState('')
    const [team,setTeam] = useState('')
    const [emphone,setEmphone] = useState('')
    const [relate,setRelate] = useState('')
    
   
    const [formError, setFormError]=useState(null)

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

     if(!fname || !lname || !age || !email ||!phone ||!relate ||!emphone ||!team ||!trans ){
        setFormError('please fill all the fields')
        return
     }
     const {data,error} = await supabase 
     .from('profiles')
     .insert([{fname,lname,age,email,phone,relate,emphone,team,trans}])

     if(error){
      console.log(error)
      setFormError('check internet connection or check the transaction message')
     }
     if(data){
      console.log(data)
      setFormError(null)
      navigate('/thank')
     }
    }
  return (
    <div>
        <form onSubmit={handleSubmit}>
        <div class="h3">
            <h3>FIGO MARATHON REGISTRATION FORM 2023</h3>
            </div>
            <img src={src} alt=""/>
            <h4>Location:Uhuru stadium, Dar es Salaam, Tanzania</h4>
            <h4>Race Dates: 12/3/2023</h4>
            <h4>Time: 6am to 1pm</h4>

            <div class="h3">
            <h3>Participants Details</h3>
            </div>

            <label htmlFor='fname'>First Name</label>
            <input class="form" type="text" id="fname" value={fname}
            onChange={(e)=>setFname(e.target.value)}
            />

            <label htmlFor='lname'>Last Name</label>
            <input class="form" type="text" id="lname" value={lname}
            onChange={(e)=>setLname(e.target.value)}
            />

            <label htmlFor='age'>Age</label>
            <input class="form" type="number" id="age" value={age}
            onChange={(e)=>setAge(e.target.value)}
            />

            <label htmlFor='email'>Email</label>
            <input class="form" type="text" id="email" value={email}
            onChange={(e)=>setEmail(e.target.value)}
            />

             <label htmlFor='phone'>Phone Number</label>
            <input class="form" type="text" id="phone" value={phone}
            onChange={(e)=>setPhone(e.target.value)}
            />

            <label htmlFor='emphone'>Emergency Person Phone Number</label>
            <input class="form" type="text" id="emphone" value={emphone}
            onChange={(e)=>setEmphone(e.target.value)}
            />

            <label htmlFor='relate'>Relationship to Emergency Contact Person</label>
            <input class="form" type="text" id="relate" value={relate}
            onChange={(e)=>setRelate(e.target.value)}
            />
            <div class="h3">
            <h3>Registraton Payments</h3>
            </div>

            <h3>Payment Method</h3>
            <Select  
             options={options}/>

           <label htmlFor='trans'>Input Transaction message</label>
            <input class="form" type="text" id="trans" value={trans}
            onChange={(e)=>setTrans(e.target.value)}
            />

            <label htmlFor='team'>Input your team</label>
            <input class="form" type="text" id="team" value={team}
            onChange={(e)=>setTeam(e.target.value)}
            />

            <div class="h3">
            <h3>Waiver & Release</h3>
            </div>

            <h4 class="h4">Weaver health questions</h4>
            <label>
            <input  type="checkbox" id="confirm"
            checked={isChecked} 
             onChange={handleChange}/>
            <span>I confirm that i am in good shape,health and condition.</span>
            </label>

             <label>
            <input  type="checkbox" id="medical"
            checked={isChecked} onChange={handleChange}/>
            <span>I don't have any medical condition or medical history that will affect my participation in this event.</span>
            </label>

            <label>
            <input  type="checkbox" id="follow"
            checked={isChecked}
            onChange={handleChange}/>
            <span>I will follow the rule and regulations of the road race event.</span>
            </label>

            <label>
            <input type="checkbox" id="road"
            checked={isChecked}
             onChange={handleChange}/>
                <span>I acknowledge that this road race requires physical activity and rhere are possible risks and danger</span>
            </label>

            <label>
            <input  type="checkbox" id="reg"
            checked={isChecked}
             onChange={handleChange}/>
            <span>I confirm that all information in this registration form is accurate and true</span>
            </label>

            <h4 class="h4">Release terms & conditions</h4>
            <label>
            <input  type="checkbox" id="confirm"
            checked={isChecked}
             onChange={handleChange}/>
            <span>My health is good to participate in this event, 
            i am ready for any risk during event, accept the secrecy of my information
            according to the organization of the event , this includes payment entry fees
            that i will not be refunded if i will not participate in any reason.
            </span>
            </label>


            <button>Submit</button>
            {formError && (<p>{formError}</p>)}
        </form>
    </div>
  )
}

export default Home`
`