React- how to enable a button when TextField has value

Question

So I'm trying to enable a button as soon as I enter a value in the TextField. The only way it is enabled is if i click outside the TextField after I put a value inside the Textfield. I know i'm missing something small but I still haven't found the correct way. I would appreciate your advice .

The code for the TextField and LoadingButton

the Window

Answer 1

I have included only the relevant part.

import { useState } from "react";

export default function Home() {
  const [name, setName] = useState("");

  const hanldeUserInput = (e) => {
    setName(e.target.value);
  };

  return (
    <Dialog>
      <TextField onChange={hanldeUserInput} value={name} />

      <LoadingButton disabled={name === ""}>Save</LoadingButton>
    </Dialog>
  );
}

Answer 2

You could keep track of the current value inside your textfield and store it inside the state.

const [txtFieldValue, setTxtFieldValue] = useState<string>('')

and write a function which is triggered on the change event in your textfield:

function handleTxtFieldChange(event) {
    if (event.target.id === 'myTextFieldId') {
      setTxtFieldValue(event.target.value)
    }
  }

And then you can adjust your textfield:

      <TextField
        id={'myTextFieldId'}
        // ... all your other stuff
        onChange={(event) => {
          handleTxtFieldChange(event)
        }}
      />

and you can then use the set txtFieldValue to render the button like:

{txtFieldValue != '' ? <Button /> : <></>}

or if you just want to disable it you can just use the

txtFieldValue != ''

as a boolean.