Цель: Создать компонент TemperatureConverter, используя компоненты TextField и Button из Material UI для ввода и отображения температур в градусах Цельсия и Фаренгейта. Компоненты: Используйте TextField для ввода значения температуры. Добавьте лейблы к каждому TextField, указывая единицы измерения (Цельсия и Фаренгейта). Логика: При вводе значения в одно поле, автоматически конвертируйте его и отобразите в другом. Реализуйте конвертацию температур в обоих направлениях.

import React, { useState } from 'react';
import { TextField, Button } from '@material-ui/core';

const TemperatureConverter = () => {
  const [celsius, setCelsius] = useState('');
  const [fahrenheit, setFahrenheit] = useState('');

  const handleCelsiusChange = (e) => {
    const value = e.target.value;
    setCelsius(value);
    setFahrenheit(value !== '' ? (parseFloat(value) * 9/5 + 32).toFixed(2) : '');
  };

  const handleFahrenheitChange = (e) => {
    const value = e.target.value;
    setFahrenheit(value);
    setCelsius(value !== '' ? ((parseFloat(value) - 32) * 5/9).toFixed(2) : '');
  };

  return (
    <div>
      <TextField
        label="Celsius"
        value={celsius}
        onChange={handleCelsiusChange}
        variant="outlined"
        type="number"
      />
      <TextField
        label="Fahrenheit"
        value={fahrenheit}
        onChange={handleFahrenheitChange}
        variant="outlined"
        type="number"
      />
    </div>
  );
};

export default TemperatureConverter;

Пример использования:

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

const App = () => {
  return (
    <div>
      <h1>Temperature Converter</h1>
      <TemperatureConverter />
    </div>
  );
};

export default App;

Этот компонент будет позволять пользователю вводить температуру в градусах Цельсия или Фаренгейта, и автоматически конвертировать ее в другую единицу при вводе.