kgtopoundsApp.js

import React, { Component } from "react";
import "./App.css";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";

const initialState = {
  pounds: "",
  kilograms: "",
};

class App extends Component {
  state = initialState;

  handlePounds = (e) => {
    const pounds = e.target.value;

    this.setState({
      pounds,
      kilograms: pounds / 2.2046,
    });

    if (pounds === "") {
      this.setState(initialState);
    }
  };

  handleKilograms = (e) => {
    const kilograms = e.target.value;

    this.setState({
      kilograms,
      pounds: kilograms * 2.2046,
    });

    if (kilograms === "") {
      this.setState(initialState);
    }
  };

  clearAll = () => {
    this.setState(initialState);
  };

  render() {
    return (
      <div className="App">
        <form
          onSubmit={(e) => e.preventDefault()}
          noValidate
          autoComplete="off"
        >
          <h1 className="title">Weight Converter</h1>
          <TextField
            id="standard-number"
            label="Enter pounds"
            value={this.state.pounds}
            onChange={this.handlePounds}
            type="number"
            margin="normal"
            className="input-field"
          />
          <TextField
            id="standard-number"
            label="Enter kilograms"
            value={this.state.kilograms}
            onChange={this.handleKilograms}
            type="number"
            margin="normal"
            className="input-field"
          />
          <Button
            variant="contained"
            color="primary"
            onClick={this.clearAll}
            className="button"
          >
            Clear All
          </Button>
        </form>
      </div>
    );
  }
}

export default App;