Javascript - Change an input and reflact change on several other inputs with React

albertoivo
October 25, 2023
215 views
1 vote
2 Answers

I have 19 inputs and when one of them is changed, all the others reflect the change with a calculation.

<input value={mph} onChange={(e) => cmph(e.target.value, setKph, setMps)}
<input value={kph} onChange={(e) => ckph(e.target.value, setMph, setMps)}
<input value={mps} onChange={(e) => cmps(e.target.value, setKph, setMph)}

For each input I have one state. So I used 19 useState variables. And all input have an onChange.

  const [mph, setMph] = useState() // miles per hour
  const [kph, setKph] = useState() // kiliometers per hour
  const [mps, setMps] = useState() // miles per seconds

So when any input is changed, it’s onChange call its unique function do the calculation and set the state 18 times (for each of the other input).

Each input calls it’s own function that calculates the value of the others. Its simple math. No DB or endpoint calling.

function cmph(mph, setKph, setMps) {
  const kph = mph * 1.60934
  setKph(Math.round((kph + Number.EPSILON) * 100) / 100)

  const mps = mph / 2.237
  setMps(Math.round((mph + Number.EPSILON) * 100) / 100)
}

function ckph(kph, setMph, setMps) {
  const mph = kph / 1.60934
  setMph(Math.round((mph + Number.EPSILON) * 100) / 100)

  const mps = mph / 2.237
  setMps(Math.round((mps + Number.EPSILON) * 100) / 100)
 }

function cmps(mps, setKph, setMph) {
  const mph = mps * 2.237
  setMph(mph)

  const kph = mph * 1.60934
  setKph(kph)
}

All I want is change any of the inputs and all others reflect the new value automatically.

PS: I reduced for three inputs so the example will be smaller. But I have 19 of these.

How can I solve this?

Stack Snippet:

const { useState } = React;

const Example = () => {
    const [mph, setMph] = useState(); // miles per hour
    const [kph, setKph] = useState(); // kiliometers per hour
    const [mps, setMps] = useState(); // miles per seconds

    function cmph(mph, setKph, setMps) {
        const kph = mph * 1.60934;
        setKph(Math.round((kph + Number.EPSILON) * 100) / 100);

        const mps = mph / 2.237;
        setMps(Math.round((mph + Number.EPSILON) * 100) / 100);
    }

    function ckph(kph, setMph, setMps) {
        const mph = kph / 1.60934;
        setMph(Math.round((mph + Number.EPSILON) * 100) / 100);

        const mps = mph / 2.237;
        setMps(Math.round((mps + Number.EPSILON) * 100) / 100);
    }

    function cmps(mps, setKph, setMph) {
        const mph = mps * 2.237;
        setMph(mph);

        const kph = mph * 1.60934;
        setKph(kph);
    }

    return (
        <div>
            <input
                value={mph}
                size="5"
                onChange={(e) => cmph(e.target.value, setKph, setMps)}
            />
            <input
                value={kph}
                size="5"
                onChange={(e) => ckph(e.target.value, setMph, setMps)}
            />
            <input
                value={mps}
                size="5"
                onChange={(e) => cmps(e.target.value, setKph, setMph)}
            />
        </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);

<div id="root"></div>

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

Answers

There are tons of React-Ways to solve your issue.

One of those is using a Object with a key for each of your input/data-types.

Then onChange on of of the inputs, use a data-speed attribute to see which value changed, set that 1:1 to the new state. For every other key in the state object, find your correct convertFunction and apply it as well.

I’ve replaced all the cmps / ckph functions with a simple convertFunction to keep the demo clean.

const { useState } = React;

const Example = () => {
    const [data, setData] = useState({ 
      mph: 0,
      kph: 0,
      mps: 0
    });
    
    const convertFunction = (n) => Math.round(n * Math.random() * 16);
    
    const onInput = (e) => {
        const changedInputValue = +e.target.value;
        const changedInputType = e.target.getAttribute('speed');
        
        setData(p => {
            const newData = { ...data };
            for (var speed in p) {
                if (speed === changedInputType) {
                    newData[speed] = changedInputValue;
                } else {
                    // Choose correct convert function
                    newData[speed] = convertFunction(changedInputValue)
                }
            }
            return newData;
        });
    }

    return (
        <div>
            <input
                value={data.mph}
                size="5"
                speed='mph'
                onChange={onInput}
            />
            <input
                value={data.kph}
                size="5"
                speed='kph'
                onChange={onInput}
            />
            <input
                value={data.mps}
                size="5"
                speed='mps'
                onChange={onInput}
            />
        </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);

<div id="root"></div>

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

The problem is that your inputs are controlled, which means their values don’t automatically update unless you set the state member you’re using to set their value. The reason it works initially is that by not giving an initial value to useState, you’re defaulting to undefined, and value={undefined} makes React think the input is uncontrolled. As soon as you change a value, the inputs go from uncontrolled to controlled, and it stops working. (If you use the development version of the React libs uring development, you’ll get a big warning about that.) More about controlled vs. uncontrolled inputs in the documentation.

Instead:

Use initial values with useState so that they don’t default to undefined
When processing the change event of each input, update the state member that controls it

For instance, for mph:

const mphOnChange = ({ currentTarget: { value } }) => {
    setMph(value); // <======================= This is what was missing
    cmph(value, setKph, setMps);
};

Working example (those default values may need tweaking):

const { useState } = React;

function cmph(mph, setKph, setMps) {
    const kph = mph * 1.60934;
    setKph(Math.round((kph + Number.EPSILON) * 100) / 100);

    const mps = mph / 2.237;
    setMps(Math.round((mph + Number.EPSILON) * 100) / 100);
}

function ckph(kph, setMph, setMps) {
    const mph = kph / 1.60934;
    setMph(Math.round((mph + Number.EPSILON) * 100) / 100);

    const mps = mph / 2.237;
    setMps(Math.round((mps + Number.EPSILON) * 100) / 100);
}

function cmps(mps, setKph, setMph) {
    const mph = mps * 2.237;
    setMph(mph);

    const kph = mph * 1.60934;
    setKph(kph);
}

const Example = () => {
    const [mph, setMph] = useState(0); // miles per hour
    const [kph, setKph] = useState(0); // kiliometers per hour
    const [mps, setMps] = useState(0); // miles per seconds

    const mphOnChange = ({ currentTarget: { value } }) => {
        setMph(value);
        // Recommend explicit conversion to number here
        cmph(value, setKph, setMps);
    };

    const kphOnChange = ({ currentTarget: { value } }) => {
        setKph(value);
        // Recommend explicit conversion to number here
        ckph(value, setMph, setMps);
    };

    const mpsOnChange = ({ currentTarget: { value } }) => {
        setMps(value);
        // Recommend explicit conversion to number here
        cmps(value, setKph, setMph);
    };

    return (
        <div>
            <input value={mph} size="5" onChange={mphOnChange} />
            <input value={kph} size="5" onChange={kphOnChange} />
            <input value={mps} size="5" onChange={mpsOnChange} />
        </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);

<div id="root"></div>

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

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – Change an input and reflact change on several other inputs with React

Answers