Sometimes, we want to set a value for TextField from Material UI with React.
In this article, we’ll look at how to set a value for TextField from Material UI with React.
How to set a value for TextField from Material UI with React?
To set a value for TextField from Material UI with React, we set the value
prop of the TextField
to a state value.
And we set the onChange
prop to a function that sets the state to a the value that’s inputted.
For instance, we write:
import * as React from "react";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
export default function App() {
const [value, setValue] = React.useState();
return (
<div>
<TextField value={value} onChange={(e) => setValue(e.target.value)} />
<Button onClick={() => setValue("")}>Reset Text</Button>
</div>
);
}
We call the useState
hook to create the value
state and the setValue
function to set the value
state’s value.
Next, we set the value
prop of the TextField
to the value
prop.
And we set the onChange
prop of the TextField
to a function that calls setValue
with e.target.value
.
e.target.value
has the input value of the TextField
.
Next, we add a Button
that has the onClick
prop set to a function that calls setValue
with an empty string to let us clear the input by clicking the button.
Conclusion
To set a value for TextField from Material UI with React, we set the value
prop of the TextField
to a state value.
And we set the onChange
prop to a function that sets the state to a the value that’s inputted.