Here I have 3 inputs of mail, if an user wants to fill any 1 input with his input , then only that particular input which will be filled by the user should be sent to the backend. pls help!:)
const App =() => {
const [email,setEmail]=useState("");
const [emailEA,setEmailEA]=useState("");
const [emailFoo,setEmailFoo]=useState("");
const submitEmail={
Axios.post("http://localhost:3001/",{email,emailEA,emailFoo})
}
return (
<div className="App">
<Navbar/>
<Banner/>
<input
className="email"
value={email}
onChange={(e)=>{
setEmail(e.target.value)
}}
placeholder="Your email address"
/>
<TailorMadeServices/>
<WhyUs/>
<Testimonial/>
<Hearit/>
<EarlyAcc/>
<input
value={emailEA}
placeholder="Your Email Address"
onChange={(e)=>{
setEmailEA(e.target.value)
}}
className="eainput1"
/>
<Footer/>
<input
className="fmail"
placeholder="Your Email Address"
value={emailFoo}
onChange={(e)=>
{
setEmailFoo(e.target.value)
}
}
/>
</div>
);
Use this code in submitEmail function.
// test values
const email = 'email@test.com'
const emailFoo = ''
const emailEA = 'emailEA@test.com'
const emails_to_send = {email, emailFoo ,emailEA}
for(const email in emails_to_send){
if(!emails_to_send[email].match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/g)) delete emails_to_send[email]
}
// Axios.post("http://localhost:3001/",emails_to_send)
console.log(emails_to_send)Note: Uncomment the axios.post line while using this code.
Note: Although the code works properly , I think that sending unfilled emails to backend shouldn't be a problem.