import React, { useState, useEffect } from 'react'; // Define the conversion factors relative to square meters (base unit) const units = { 'square_meters': { label: 'Square Meters (m²)', factor: 1 }, 'square_kilometers': { label: 'Square Kilometers (km²)', factor: 1_000_000 }, 'square_feet': { label: 'Square Feet (ft²)', factor: 0.092903 }, 'square_miles': { label: 'Square Miles (mi²)', factor: 2_589_988.11 }, 'acres': { label: 'Acres (ac)', factor: 4046.86 }, 'hectares': { label: 'Hectares (ha)', factor: 10_000 }, 'square_inches': { label: 'Square Inches (in²)', factor: 0.00064516 }, 'square_yards': { label: 'Square Yards (yd²)', factor: 0.836127 }, }; export default function App() { // State for the input value const [inputValue, setInputValue] = useState(''); // State for the 'from' unit const [fromUnit, setFromUnit] = useState('square_meters'); // State for the 'to' unit const [toUnit, setToUnit] = useState('square_feet'); // State for the conversion result const [result, setResult] = useState(''); // State for error messages const [error, setError] = useState(''); // Effect to perform conversion whenever relevant states change useEffect(() => { convertArea(); }, [inputValue, fromUnit, toUnit]); // Function to handle input value changes const handleInputChange = (e) => { const value = e.target.value; // Allow empty string or numbers (including decimals) if (value === '' || /^\d*\.?\d*$/.test(value)) { setInputValue(value); setError(''); // Clear error if input becomes valid } else { setError('Please enter a valid number.'); } }; // Function to handle 'from' unit changes const handleFromUnitChange = (e) => { setFromUnit(e.target.value); }; // Function to handle 'to' unit changes const handleToUnitChange = (e) => { // Corrected: removed destructuring from parameter setToUnit(e.target.value); // Access e.target.value inside the function }; // Function to swap 'from' and 'to' units const swapUnits = () => { setFromUnit(toUnit); setToUnit(fromUnit); }; // Core conversion logic const convertArea = () => { if (inputValue === '') { setResult(''); setError(''); return; } const value = parseFloat(inputValue); if (isNaN(value)) { setResult(''); setError('Please enter a valid number.'); return; } // Get factors for selected units const fromFactor = units[fromUnit]?.factor; const toFactor = units[toUnit]?.factor; if (fromFactor === undefined || toFactor === undefined) { setError('Invalid unit selected. Please choose units from the list.'); setResult(''); return; } try { // Convert 'from' unit to square meters (base unit) const valueInSquareMeters = value * fromFactor; // Convert square meters to 'to' unit const convertedValue = valueInSquareMeters / toFactor; setResult(convertedValue.toFixed(6)); // Display result with 6 decimal places setError(''); } catch (e) { setError('An error occurred during conversion. Please try again.'); setResult(''); } }; return ( ); }