Why isn't the value of rem changing?-CodePudding

I am trying to make a simple px to rem convertor in React. But the value of the variable rem is not changing when the value of px changes. Here is the code :

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

function App() {
    const [pixel, setPixel] = useState(0);
    const [rem, setRem] = useState(0);
    return (
        <div className="app">
            <div className="header">
                <h1>PX To REM Converter</h1>
            </div>
            <div className="conversion">
                <div className="value">
                    <form action="" className="form">
                        <input
                            type="text"
                            name="px"
                            placeholder="PX"
                            onChange={(e) => setPixel(e.target.value) && setRem(e.target.value / 16)}
                        />
                    </form>
                </div>
                <div className="answer">
                    <p>{rem} REM</p>
                </div>
            </div>
        </div>
    );
}

export default App;

CodePudding user response：

setState() being a setter does not return anything. Since it does not return anything, setPixel(e.target.value) evaluates to undefined and hence the part after && is not run. That is how && (Logical AND) works.

Logical AND (&&) evaluates operands from left to right, returning immediately with the value of the first falsy operand it encounters; if all values are truthy, the value of the last operand is returned.

You can do this:

onChange={(e) => {
setPixel(e.target.value);
setRem(e.target.value / 16);
}}

CodePudding user response：

It's just a small mistake in calling your state setters. You're calling setPixel fine, but setRem is not being called. It's a very common mistake people make (including myself!).

For instance, I can't tell you how many times I've written an if statement like:

if (typeof value === 'string' && value2 === 'number') ...

Forgetting that using the && operator doesn't mean you don't have to redeclare what you want to do.

The above code snippet should of course be:

if (typeof value === 'string' && typeof value2 === 'number') ...

So for you, you just need to wrap your setters in a function call:

onChange={(e) => {
  setPixel(e.target.value);
  setRem(e.target.value / 16);
}}

And you should be set!