React Js BMI Calculator

Body Mass Index (BMI) is a measure of body fat based on height and weight that applies to adult men and women. It is calculated by dividing weight in kilograms by height in meters squared. The BMI can be used to determine if an individual is underweight, normal weight, overweight, or obese.

BMI Calculator using React Hooks

In this tutorial, we will create a BMI calculator using React hooks. React hooks are a new addition in React 16.8 that allow you to use state and other React features without writing a class.

Below is the code for our BMI calculator component:

import React, { useState } from 'react';

const BMICalculator = () => {
  const [weight, setWeight] = useState('');
  const [height, setHeight] = useState('');
  const [bmi, setBMI] = useState('');

  const calculateBMI = () => {
    const bmiValue = (weight / (height ** 2)).toFixed(2);
    setBMI(bmiValue);
  };

  return (
    

       setWeight(e.target.value)} />
       setHeight(e.target.value)} />
      Calculate BMI
      {bmi && 
Your BMI is: {bmi}
}
    
  );
};

export default BMICalculator;

Usage

To use the BMI calculator component in your React application, you can simply import it and include it in your JSX like this:

import React from 'react';
import BMICalculator from './BMICalculator';

const App = () => {
  return (
    

      
BMI Calculator
      
    
  );
};

export default App;

With this BMI calculator component in your React application, you can easily calculate your BMI and keep track of your health goals. Feel free to customize the UI and functionality to suit your needs!