How to use multiple forms in same React?

Question

I want to make a multi-stage react form. In this particular code, only Zipcode will be asked and will be submitted on submitting the form. But how to bring other forms asking for Email, important thing~ I want the form for email after I submit Zipcode, as both email and zipcode will be sent to backend together.

import React, { useEffect, useState } from 'react';
const  Rider_Signup = ()=>{
 const [zipcode,setzipcode]=useState();
 const [email,set_email]=useState();
 const onSubmitform = async e =>{
     e.preventDefault();
     try{
         const body={zipcode,email};
         const response = await fetch("https://taxibackendf.herokuapp.com/api/service/signup",{
             method:"POST",headers:{"Content-Type":"application/json"},
             body:JSON.stringify(body)
         })
         const datainjson = await response.json();
         window.location =`/driver/login`;
     }catch(err){
         console.log('Error')
     }
 }
 return (   
  <div className="admin_form_div">
    

    <form  action="/initial" id="admin_form"  name="admin_form" onSubmit={onSubmitform}
            <input type="text" name="Zipcode" className="input" value={zipcode} 
             onChange={e =>setzipcode(e.target.value)} 
               />  
            <button type="submit" className="confirm_btn" >Confirm</button>
    </form> 
 </div>
 );
  };
   export default Rider_Signup;

FAHEEM KHAN · Accepted Answer · 2021-03-26 14:10:54Z

2

const [step, setstep] = useState(1);

const [formdata, setFormData] = useState({zip:"", email:""}); // use to hold input from user 

const renderForm = () =>{
    switch(step){
        case 1: return <div>Form one with email<button onClick = {() => setstep(step+1)}>Submit</button></div>
        case 2: return <div>Form with zip code <button onClick = {() => setstep(step+1)}>Submit</button></div>
        default: return <div>Default case</div>


    }

}
return (

    renderForm()
)

`

answered Mar 26, 2021 at 14:10

FAHEEM KHAN

613 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shivam Sourav Jha Over a year ago

A newbie question for verification ~ <input type="email" name="name" className="Email" value={formdata.email} onChange={e =>setFormData(formdata.email=(e.target.value))}" required /> will this be correct format?

FAHEEM KHAN Over a year ago

<input type="email" name="name" className="Email" value={formdata.email} onChange={e =>setFormData({...formdata, email:e.target.value})}" required />

Collectives™ on Stack Overflow

How to use multiple forms in same React?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related