How to clear TextField of Materal ui

Question

I have created a form with material ui, and I would like to clear it. I have searched for answers/solutions across Stackoverflow but all of them are not working for me.

I have tried by using setstate but it not result to clear the form.

I want to know how to do this using onclick event of the button.

import React, { Component } from "react";
import {
Grid,
TextField,
AppBar,
Typography,
Toolbar,
Button
} from "@material-ui/core";

export class MyInput extends Component {
constructor(props) {
    super(props);
    this.state = {
        first_name: "",
        last_name: ""
    };
}
handle_input = (name, value) => {
    let cur_state = this.state;
    cur_state[name] = value;
    this.setState(cur_state);
};
render() {
    return (
        <Grid container justify="center">
            <Grid item md={4}>
                <TextField
                    defaultValue={this.state.first_name}
                    variant="outlined"
                    label="First Name"
                    onKeyUp={(e) => {
                        this.handle_input("first_name", e.target.value);
                    }}
                />
            </Grid>
            <Grid item md={4}>
                <TextField
                    defaultValue={this.state.last_name}
                        variant="outlined"
                    label="Last Name"
                        onKeyUp={(e) => {
                            this.handle_input("last_name", e 
  .target.value);
                        }}
                    />
                </Grid>
                <Grid item md={4}>
                    <div
                        style={{
                        width: "100%",
                            padding: "10px",
                            display: "flex",
                            justifyContent: "space-between"


                        }}
                    >
                        <Button color="primary" variant="contained">
                            save
                        </Button>
                        <Button
                            color="secondary"
                            variant="contained"
                            onClick={() => {
                                this.setState({
                                    first_name: "",
                                    last_name: ""
                                });
                            }}
                        >
                            cancel
                        </Button>
                    </div>
                </Grid>
            </Grid>
        );
    }
}

export default MyInput;

Answer 1

I dont know if this will help as I am pretty new to react myself but you could try making a functional component instead of a class to help reduce the amount of code you need, i would do something like this

import React, {useState} from "react";

export default function MyInput(props) {
    const [myState, setMyState] = useState(props);

    function clearState() {
        setMyState.first_name("")
        setMyState.last_name("")
    }

    return (
            //Your grid code here
        )

//set your button on click to this
    onClick = {() => {clearState()}}

Look into writing components like this its quite nice. Again this will need tweaking but may be a point in the right direction.

Answer 2

Inside the TextField set a value,

           <TextField
                value={this.state.first_name}
                defaultValue={this.state.first_name}
                variant="outlined"
                label="First Name"
                onKeyUp={(e) => {
                    this.handle_input("first_name", e.target.value);
                }}
            />

Then when you want to clear it, just use setState

this.setState({ first_name: '' })

Edit:

In fact, you can delete defaultValue as the default is an empty string anyways, which is what you're using.

       <TextField
            value={this.state.first_name}
            variant="outlined"
            label="First Name"
            onKeyUp={(e) => {
                this.handle_input("first_name", e.target.value);
            }}
        />

It may be worth reading the react docs, basically you're wanting to override the form's internal state, which you do by using the value prop