Apply for Zend Framework Certification Training

ReactJs




Step 1 create an hello-form.js

 import React, { useState } from 'react';
 
 const Helloform = () => {
 
    const [employeeName, setemployeeName]= useState('');
    const [employeeEmail, setemployeeEmail]= useState('');
    const [employeeAddress, setemployeeAddress]= useState('');
    const [employeePassword, setemployeePassword]= useState('');
    const [employeeConfirmPassword, setemployeeConfirmPassword]= useState('');
 
    const handleEmployeename= (e)=>{
        setemployeeName(e.target.value);
    }
    const handleEmployeeemail=(e)=>{
        setemployeeEmail(e.target.value);
    }
    const handleEmployeeAddress=(e)=>{
        setemployeeAddress(e.target.value);
    }
    const handleEmployeePassword=(e)=>{
        setemployeePassword(e.target.value);
    }
    const handleEmployeeConfirmPassword=(e)=>{
        setemployeeConfirmPassword(e.target.value);
    }
    const handleFormSubmit=(e)=>{
        if(employeeName === ''){
            alert("Put your name");
        }else if(employeeEmail === ''){
            alert('enter your email');
        }else if(employeeAddress === ''){
            alert('enter your address')
        }else if(employeePassword === ''){
            alert('enter your password')
        }else if(employeePassword !== employeeConfirmPassword){
            alert("Both passwod does not match");
        }else{
            var formValue = employeeName+'  '+employeeEmail+'  ';
            alert("Form submited  "+ formValue);
        }
        e.preventDefault();
    }
    return <div>
                <section class="section">
                <div class="box-main">
                <div class="firstcontent">
                <form onSubmit={(e)=>{handleFormSubmit(e)}} >
        <table>
            <tr>
                <th colSpan={2}>Employee Registration Formth>
            <tr>
            <tr><td colSpan={2}><hr> <hr> <td><tr>
            <tr>
                <th align='left'>Employee name :></th>
                <td><input type='text' value={employeeName} onChange={(e)=>{handleEmployeename(e)}} /><td>
            <tr>
            <tr>
                <th align='left'>Employee email :<th>
                <td><input type='text' value={employeeEmail} onChange={(e)=>{handleEmployeeemail(e)}} /><td>
            <tr>
            <tr>
                <th align='left'>Employee address :<th>
                <td><input type='text' value={employeeAddress} onChange={(e)=>{handleEmployeeAddress(e)}} /><td>
            <tr>
            <tr>
                <th align='left'>Employee password :><th>
                <td><input type='text' value={employeePassword} onChange={(e)=>{handleEmployeePassword(e)}} /><td>
            <tr>
            <tr>
                <th align='left'>Employee confirm password :><th>
                <td><input type='text' value={employeeConfirmPassword} onChange={(e)=>{handleEmployeeConfirmPassword(e)}} />td>
            <tr>
            <tr>
                <td colSpan={2} align='center'><input type='submit' value="Submit"/>td>
            <tr>
           
        table>
        form>
        div>
        div>
        section>
        div>
       
 };
 export default Helloform;

 

< Login code in react create an home page or landing page in reactJs >



Ask a question



  • Question: 
    {{questionlistdata.blog_question_description}}
    • Answer:
      {{answer.blog_answer_description  }}
    Replay to Question

(+91)-9910699802
Become A Member     Become A Teacher
Back to Top