Update input fields based on calculation ReactJs

user_5460225 0
Viewed 45

I have two input fields and allowing user to type on either inputs to perform meters to kilometers conversion. I'm trying to use useEffect to watch for changes and update either input field but it's not functioning correctly.

import React, { useState, useEffect } from "react";
import './App.css';

function App() {
  const [value, setValue] = useState('');
  const [value2, setValue2] = useState('');
  useEffect(() => {
    let res = parseInt(event.target.value) * 1000;
    setValue2(res.toString());
  }, [value])
  useEffect(() => {
    let res = parseInt(event.target.value) / 1000;
    setValue(res.toString());
  }, [value2])
  const onChange = (event) => {
    setValue(event.target.value);
  };
  const onChange2 = (event) => {
    setValue2(event.target.value);
  };
  return (
    <>
      <div>Meters</div>
      <input value={value} onChange={onChange} />
      <div>Kilometers</div>
      <input value={value2} onChange={onChange2} />
    </>
  );
}

export default App;
use-effect reactjs
1 Answers

you don't need useEffect to achieve what you want :

import React, { useState } from "react";

function App() {
  const [meters, setMeters] = useState(null);
  const [kilometers, setKilometers] = useState(null);

  const handleMeterInput = (event) => {
    setMeters(event.target.value);
    setKilometers(event.target.value / 1000);
  };

  const handleKiloInput = (event) => {
    setKilometers(event.target.value);
    setMeters(event.target.value * 1000);
  };

  return (
    <>
      <h2> Meters to Kilometers converter </h2>
      <div>
        <strong>Meters :</strong>
        <input type="number" value={meters} onChange={handleMeterInput} />
      </div>
      <div>
        <strong>Kilometers :</strong>
        <input type="number" value={kilometers} onChange={handleKiloInput} />
      </div>
    </>
  );
}

export default App;

sandbox example here

user_146000340
Related