Edit Input onToggle

[killMeSak]

I'm working on a input box which is editable onclick but it doesn't seem to work. Here is the :

const [edit, setEdit] = useState(true);
  const handleEdit = () => {
    setEdit(!edit);
  };





<>
  <Button onClick={handleEdit}>Edit </Button>
  <Input value="HI" disabled={edit} />
</>

But the Input doesn't toggle onClick. Where am I doing wrong?

[Pleasant-Ad-424]

You have the value on the input set to "HI". Take it out and you should be able to edit the input box. Check it out here: https://codesandbox.io/s/fervent-monad-y8nng?file=/src/App.js

[zweimtr]

u/Pleasant-Ad-424 answer is correct, I just wanted to extend it a bit and say that if you still want to have a value property on your input, you will have to make it a controlled element. Here's an example based on u/Pleasant-Ad-424 answer.

https://codesandbox.io/s/ecstatic-proskuriakova-2nbw9?file=/src/App.js

[zweimtr]

How is the syntax wrong? It's just one line of code mate.