React.JS - changing input based on another input

Question

I am trying to change value of input field based on another one and vice versa.

That's create issue, any changed value not displayed in input. Anything I type is not show by input field.

Following which I tried, You can see I am trying to change value of input 1 based on 2 and 2nd input value based on first:

import React, { useState, useEffect } from 'react';

const App = () => {
  
   useEffect(() => {
   
   //fetch api call here
   
   });

  const [firstVal, setFirstVal] = useState(0);
  const [secondVal, setSecondVal] = useState(0);
  
  const changeFirstValue = (e) => {
      setSecondVal(e.target.value / 2);
  }

  const changeSecondValue = (e) => {
      setFirstVal(e.target.value * 2);
  }

  return (
    <div>
      <input type='number' value={firstVal} onChange={changeFirstValue}></input>
      <input type='number' value={secondVal} onChange={changeSecondValue}></input>
    </div>
  )
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Any help would be greatly appreciated.

Do you mean that you want those two input values to keep the 2 times relationship, no matter which is inputting? — keikai
– keikai, Commented May 11, 2020 at 12:17
@Sorry, I edited my question. I want change 2nd value on first change and first value on second change — ketan
– ketan, Commented May 11, 2020 at 12:42

Ashish Kumar · Accepted Answer · 2020-05-11 12:30:37Z

1

If you want to show the division and multiplication relationship between these two elements. Try below code:

  const changeFirstValue = (e) => {
    setSecondVal(e.target.value);
    setFirstVal(e.target.value * 2);
  }

  const changeSecondValue = (e) => {
      setFirstVal(e.target.value);
      setSecondVal(e.target.value / 2);
  }

  return (
    <div>
      <input type='number' value={firstVal} onChange={changeSecondValue}></input>
      <input type='number' value={secondVal} onChange={changeFirstValue}></input>
    </div>
  );

answered May 11, 2020 at 12:30

Ashish Kumar

1667 bronze badges

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

1 Comment

Ashish Kumar Over a year ago

@ketan It works for me codesandbox.io/s/interesting-mendeleev-21gec?file=/src/App.js

Idriss AIT HAFID · Accepted Answer · 2020-05-11 12:22:36Z

0

From what I understood, I think you have to reverse the call of the two functions, so your code will look like this:

...
 <input type='number' value={firstVal} onChange={changeSecondValue}></input>
 <input type='number' value={secondVal} onChange={changeFirstValue}></input>
...

answered May 11, 2020 at 12:22

Idriss AIT HAFID

3212 silver badges7 bronze badges

Collectives™ on Stack Overflow

React.JS - changing input based on another input

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related