Get Values, Set Values, and Default Values in the MUI TextField

I created an example of setting state values in a MUI TextField and updating the value when the TextField is changed. This is a method of setting a default value but it has more use than the default prop in the MUI TextField.

Notice the component underneath the TextField in the screenshot above. It is observing the same state value as the TextField and so its value changes on TextField change.

Full React code for this tutorial is in the Resources section.

Table of Contents hide

1 MUI TextField Set Value

2 MUI TextField Get Value

3 MUI TextField Default Value

4 Resources

See a video version of this post on YouTube or watch below:

MUI TextField Set Value

The TextField component has a prop called value that is intended for externally setting and using the current TextField value.

Here’s the simplest code for setting the TextField value externally:

const [tfValue, setTFValue] = useState("My Text");

//JSX
<TextField value={tfValue} />

This starts the TextField with the value “My Text” on render.

If tfValue is externally updated, then the value of the TextField component will also update. I created a Button that concats a “1” to tfValue onClick and also displays tfValue.

The code for this is in the Resources section.

MUI TextField Get Value

Use the onChange handler to get the current value from an MUI TextField. In this example I update a state value every time TextField value changes.

<TextField
 onChange={(newValue) => setTFValue(newValue.target.value)} />

This is the same state value that is passed to the TextField value prop in the Set Value example.

MUI TextField Default Value

The MUI TextField can display a default value on render by using the defaultValue prop.

This is useful if you don’t need to externally get or set the TextField value, or if you are using a form. A form will automatically extract a TextField child components value on submit of the form.

Here’s example code:

<TextField defaultValue={"Some Value"} />

You’ll notice that in the full demo code that I commented out the defaultValue prop. That’s because I directly pass a value to the value prop that can be updated by the Button component. If I didn’t need this functionality, I would use the simpler solution of the defaultValue prop.

Resources

import { useState } from "react";
import TextField from "@mui/material/TextField";
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";

export default function ValueTextField() {
  const [tfValue, setTFValue] = useState("Original Val");
  return (
    <Stack>
      <TextField
        onChange={(newValue) => setTFValue(newValue.target.value)}
        id="filled-1"
        label="Dynamic"
        variant="outlined"
        //defaultValue={"Def"}
        value={tfValue}
        sx={{mb:2}}
      />
      <Button variant="outlined" onClick={()=>{setTFValue(tfValue+'1')}}>{tfValue}</Button>
    </Stack>
  );
}

MUI TextField API

We can also get, set, and use default values in React-Bootstrap’s Form Control component.

Share this post:

MUI TextField Set Value

MUI TextField Get Value

MUI TextField Default Value

Resources

Leave a Comment Cancel reply