Employee Salary Calculation using React Js

In this tutorials will teach Employee Salary Calculation System using React JS. include following Condition

• if the employee salary is greater 50000 – include 10%
• if the employee salary is greater 35000 – include 5%
• if the employee salary is below 35000 no tax included

import { useState } from "react";


function EmployeeSalary() {

    const [salary, setSalary] = useState();
    var [tax, setTax] = useState();
    var [nsal, setNsal] = useState();

  
function Calculation()
{
  
      if(salary > 50000)
       {
         tax = salary * 10/100;
       }
       else if(salary > 30000)
       {
         tax = salary * 5/100;
       }
       else
       {
        tax = 0;
       }

       setTax(tax);   
       
       
       nsal = salary - tax;


    setNsal(nsal);  

}


    return (
      <div class="container">
        <h3>Employee Salary Calculation</h3>

    <div class="form-group">
    <label>Employee Name</label>
    <input type="text" class="form-control" placeholder="Employee Name" />
    </div>

    <div class="form-group">
    <label>Salary</label>
    <input type="text" class="form-control" placeholder="Enter Salary" 
    onChange={(event) =>
        {
            setSalary(event.target.value);      
        }}
    />
    </div>

    <div class="form-group">
    <label>Tax</label>
    <input type="text" class="form-control" placeholder="Tax" value={ tax }  />
    </div>


    <div class="form-group">
    <label>Net Salary</label>
    <input type="text" class="form-control" placeholder="Net Salary" value={nsal} />
    </div>
 
 
  <button type="submit" onClick={Calculation}  class="btn btn-primary mt-4">Submit</button>


        
      </div>
    );
  }
  
  export default EmployeeSalary;

i have attached the video link below. which will do this tutorials step by step

Employee Salary Calculation using React Js

Share

Watch on