CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Zulqurnain Huda
Zulqurnain Huda

Reputation: 3

How to remove TextField state

I have a Textfield. If state null but text field value showing in Textfield

<TextField
                        style={{ width: '65%'}}
                        id="standard-search"
                        label="Residential Address"
                        type="text"
                        margin="dense"
                        variant="outlined"
                        name="ResidentialAddress"
                        onChange={(e)=>this.handleInputChange(e)}
                    />

Upvotes: 0

Views: 71

Answers (2)

Souvik Ghosh
Souvik Ghosh

Reputation: 4616

You need to bind the textbox value to a state property. Based on the type of component you are using, you can try below options.

For class component:

class YouComponentName extends Component {
  constructor (props, context) {
    super(props, context)
    this.state = {
      yourTextBoxValue: ""
    }
}

  handleInputChange (event) {
    this.setState({
      yourTextBoxValue: event.target.value;
    });
  }

render(){
    <>
        <TextField
            style={{ width: '65%'}}
            id="standard-search"
            label="Residential Address"
            type="text"
            margin="dense"
            variant="outlined"
            name="ResidentialAddress"
            onChange={(e)=>this.handleInputChange(e)}
            value = {this.state.yourTextBoxValue}
        />
    </>
}

For function component (using React hooks):

function YourComponentName(props) {
    const [yourTextBoxValue, setYourTextBoxValue] = useState("")

    const handleInputChange = (event) => {
        this.setState({
            setYourTextBoxValue(event.target.value);
        });
    }

    return (
        <>
            <TextField
                style={{ width: '65%'}}
                id="standard-search"
                label="Residential Address"
                type="text"
                margin="dense"
                variant="outlined"
                name="ResidentialAddress"
                onChange={handleInputChange}
                value = {yourTextBoxValue}
            />
        </>
    )
}

Upvotes: 0

akhtarvahid
akhtarvahid

Reputation: 9779

Define your value like this value={this.state.input_value} 

<TextField
  style={{ width: '65%'}}
  id="standard-search"
  label="Residential Address"
  type="text"
  margin="dense"
  variant="outlined"
  name="ResidentialAddress"
  onChange={(e)=>this.handleInputChange(e)}
  value={this.state.input_value}
/>

Upvotes: 1

Related Questions