Reactjs

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

 

admin

Recent Posts

GitHub Copilot vs Microsoft Copilot Best AI Tool to Use in 2025

GitHub is a powerful tool used by teams and developers around the globe. This guide is…

3 days ago

Chat with Claude AI Free – Your Super-Smart AI Buddy

It's like having a super-smart buddy that is always there to help you write stories,…

7 days ago

Best Festivals UK 2025 [Free Guide Included]

The UK is known for its rich history, diverse culture, and most of all  its…

1 week ago

Bank Holidays 2025 UK – Plan Your Perfect Long Weekends

Do you have a plan for your next holiday? Being aware of the Bank Holidays within the…

1 week ago

Master Cursor AI Full Guide for Students & Creators

The world is rapidly changing of software development AI-assisted tools for coding have become the main focus. As…

2 weeks ago

Google Gemini AI Free AI Tool for Students & Creators

Google Gemini AI is among the top talked about developments. What exactly is it? What…

2 weeks ago