React - useState not reflecting the updated values

Question

I'm trying to bind a value typed by the user, in another input, which is readOnly, but it's reflecting in other input. Even though the value as I type, it can appear on html, but I'm unable to bind it to other input. Before I post this question, I already searched the SO to bind values, but most of them bind to html but not other input field, like my case

here is the codesandbox code which is causing trouble for me.

https://codesandbox.io/s/epic-bose-jr8rr

Answer 1

You can do it like this with the current implementation of Input.

1. Get value as a prop to Input and assign to another variable call it propValue

function Input({
  ...
  ...
  value: propValue
}) {

2. Change the value property of input as below to fall back to local value (value in Input component) if propValue is not provided.

<input
     ...
     ...
     value={propValue ?? value}
     ...
     ...
 />

3. In App.js set the value as employeeId to the ready only input.

<Input
      label="Reflected Id"
      value={employeeId}
      ...
      ...
></Input>

Answer 2

use setContactForm instead of mutating the state.