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;
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);
}}
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!