Javascript - React: Why does the value of my input not update, but outputting the same same state to the page or console does?

Jives
January 3, 2025
201 views
1 vote
2 Answers

Here is my code:

import { useState } from "react";

const Testing = () => {
    const [testa, setTesta] = useState({ Nickname: "Testing" });
    
    return (
        <>
            <button type="button" onClick={(e) => setTesta({})}>Add</button>
            <input type="text" value={testa?.Nickname} onChange={e => setTesta({ Nickname: e.target.value })} />
            <p>Output: {testa?.Nickname}</p>
        </>
    );
};
export default Testing;

When the page initially loads the textbox value and the text below it both reflect the correct Nickname value.

When I type into the textbox the Nickname is correctly updated in both places.

When I click the Add button to reassign the state to an empty object, the output correctly disappears, but the textbox value remains unchanged.

What causes the difference between the input value and the plain text in this case?

Answers

- Amrovic
- January 3, 2025 at 1:15 am
- 0 votes
0
The issue is with your button’s onClick event. You’re setting the state testa to an empty object with no Nickname key. Try this instead:
```
onClick={e => setTesta({ Nickname: "" })}
```
Also, not sure why you had to set it as an object. I would have set it to a string.
Login or Signup to reply.

- KananFarzali
- January 3, 2025 at 1:19 am
- 0 votes
0
The issue with your code is that when setTesta({}) is called, testa becomes an empty object, and testa?.Nickname becomes undefined. React throws an error because the value prop of the element expects a string or undefined, but when value={undefined}, the input’s displayed value doesn’t update as expected. The right code would be:
```
<input type="text"
    value={testa?.Nickname || ""} // Provide a fallback value
    onChange={e => setTesta({ Nickname: e.target.value })}
/>
```
Login or Signup to reply.