React.js useState() not updating in input

Question

I have 4 inputs that update a react state when there is text typed inside, only one of them tends to update for some reason and I can't find out why, there are no typing errors and I have checked the imports, state names, and inputs to make sure that they work correctly. Is there another factor that I'm missing here? thanks in advance

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

export default function Home() {
  const [a, setA] = useState()
  const [b, setB] = useState()
  const [c, setC] = useState()
  const [d, setD] = useState()
  
  
  return (
    <>
      <input onChange={(e) => setA(e.target.value)} />
      <input onChange={(e) => setB(e.target.value)} />
      <input onChange={(e) => setC(e.target.value)} />
      <input onChange={(e) => setD(e.target.value)} />
      <p style={{color:'white'}}>
        {a, b, c, d}
      </p>
    </>
  );
}

I have tried changing the state names to different things, I have retyped all inputs manually multiple times, and I have checked the imports to make sure they work. I have also tried having the states start with (' ') or (), but both didn't work.

set the value property to the inputs to be the state you need. — kengru, Apr 26 '23 at 14:55
Does this answer your question? [How does the comma operator work in js?](https://stackoverflow.com/questions/50678527/how-does-the-comma-operator-work-in-js) — David, Apr 26 '23 at 14:57
Hi, as @kengru said, add the value property to your inputs: ` setA(e.target.value)} value={a} /> setB(e.target.value)} value={b} /> ` You can see the documentation exemple here : https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable — Fromwood, Apr 26 '23 at 14:57
This is a case of "ignoring console errors", because there is no way this did not raise one. If you're using any kind of IDE i would also think it gave you some kind of warning. PS: if you're learning then let that be an important lesson: it is always better to try and understand those errors rather than ignoring/dissmissing them. — N.K, Apr 26 '23 at 15:32

score 2 · Answer 1 · answered Apr 26 '23 at 14:58

Setting the state works just fine. You have an other mistake:

You should name the properties separately to display them i.e. {a}, {b}, {c}, {d}

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

export default function Home() {
  const [a, setA] = useState()
  const [b, setB] = useState()
  const [c, setC] = useState()
  const [d, setD] = useState()
  
  
  return (
    <>
      <input onChange={(e) => setA(e.target.value)} />
      <input onChange={(e) => setB(e.target.value)} />
      <input onChange={(e) => setC(e.target.value)} />
      <input onChange={(e) => setD(e.target.value)} />
      <p style={{color:'black'}}>
        {a}, {b}, {c}, {d}
      </p>
    </>
  );
}

also I had to set the color to black to display the text against a white (default) background.

score 1 · Answer 2 · answered Apr 26 '23 at 14:59

Writing as {a, b, c, d} is giving an error in codesandbox.io:

JSX expressions may not use the comma operator. Did you mean to write an array?

This only displays the last input, where you are updating d's state. If you would like to display them comma separated, do this: {a}, {b}, {c}, {d}.

score 0 · Answer 3 · answered Apr 26 '23 at 15:09

Your code looks pretty much correct, I believe the problem is the way you try to print the a,b,c,d variables. When you write a JSX expression (everything starting from the <> to the </> is jsx) what you put within the curly brackets should be a valid javascript expression, it can be a string, a number or many other things. The {a, b, c, d} probably does not evaluate in the way you think it is, it you want to have it displayed as strings you can write it as:

{"" + a + ", " + b + ", " + c + ", " + d}

Which is a valid JS code that evaluate to a string that contains a,b,c,d with comma separation.

The suggestion of leonardkraemer is also great: you can just put a-b in a set of curly braces each (like this {a}) and then add the commas between. — Gal Weiss, Apr 26 '23 at 15:11

React.js useState() not updating in input

3 Answers3