How to automatically update one input form based on another input form in react?

Question

How to update 2 interdependent input fields in react correctly? This code updates one input based on other but fails to update itself in the process.

    import { useState } from "react";

export default function App() {
  const [data1, setData1] = useState(0);
  const [data2, setData2] = useState(0);

  const inputEvent1 = (e) => {
    //e.preventDefault();
    const data2 = (e.target.value / 2).toString();
    setData2(data2);
    console.log("inputEvent1 " + e.target.value);
  };

  const inputEvent2 = (e) => {
    //e.preventDefault();
    const data1 = (e.target.value * 2).toString();
    setData1(data1);
    console.log("inputEvent2 " + e.target.value);
  };

  return (
    <form className="a">
      <div className="b">
        <h1 className="c">Data Changer</h1>
        <div className="">
          <div className="d" onChange={inputEvent1}>
            <p>Enter Data1:</p>
            <input
              name="dataField1"
              type="text"
              className="input"
              placeholder="Data1"
              value={data1.toString()}
            />
          </div>
          <div className="e" onChange={inputEvent2}>
            <p>Enter Data2:</p>
            <input
              name="dataField2"
              type="text"
              className="input"
              placeholder="Data2"
              value={data2.toString()}
            />
          </div>
        </div>
      </div>
    </form>
  );
}

CodeSandbox https://codesandbox.io/s/react-data-changer-2-input-boxes-q3pt9?file=/src/App.js:0-1298

e.a. · Accepted Answer · 2021-09-26 09:30:21Z

1

you just need another setState in your eventHandlers to set the changing field like this:

  const inputEvent1 = (e) => {
    const data2 = (e.target.value / 2).toString();
    setData1(e.target.value);
    setData2(data2);
  };

  const inputEvent2 = (e) => {
    const data1 = (e.target.value * 2).toString();
    setData2(e.target.value);
    setData1(data1);
  };

here is the working sandbox

answered Sep 26, 2021 at 9:30

e.a.

9475 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to automatically update one input form based on another input form in react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related