Can't empty input field after submit in React

Question

I try some similar solutions I find on stack overflow but nothing seems to work, this is minor problem and according to code it should work, only problem that is puzzling me is maybe that after I submit the form app control is handed over to parent class, one level up which has nothing to do with state, and my setState method is called after this.props.api method in child component, I hope someone could help me with this one...

HERE IS THE CODE FROM CHILD

class UserInput extends Component{
    constructor(props){
        super(props)
        this.state = {
            value: ''
        }
    }

    handleChange = (event) => {
        this.setState({value: event.target.value});
    }  

    onFormSubmit = (e) => {
        e.preventDefault();
        this.props.api(this.state.value);
        this.setState({
            value:''
          });
    }

    render(){
        return (
            <div>
                <form noValidate autoComplete="off" onSubmit={this.onFormSubmit}>
                <TextField onChange={this.handleChange}
                    id="outlined-name"
                    label="Image Search"
                    margin="normal"
                    variant="outlined"
                    style={{minWidth:'500px'}}
                    type="text"
                    /><br></br>
                    <Button 
                    variant="contained" 
                    color="primary"
                    type="submit"
                    >

AND THIS IS CODE FROM PARENT CLASS

class App extends React.Component {

  async onFormSubmit(term){
    const res = await axios.get('https://api.unsplash.com/search/photos', {
      params:{query: term},
      headers:{
          Authorization: 'Client-ID'
      }
    });
    console.log(res.data.results)
  }


  render(){
    return (
      <div className="App">
      <UserInput api={this.onFormSubmit}/>
      <List/>

Wherr are you using the state value? It doesn't even go to the text field! — Karthik R
– Karthik R, Commented Oct 2, 2019 at 11:30

ravibagul91 · Accepted Answer · 2019-10-02 11:29:11Z

1

I think you have not binded your TextField with state value,

<TextField 
    onChange={this.handleChange}
    value={this.state.value}  //Provide value here
    id="outlined-name"
    label="Image Search"
    margin="normal"
    variant="outlined"
    style={{minWidth:'500px'}}
    type="text"
/>

answered Oct 2, 2019 at 11:29

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bakar_dev · Accepted Answer · 2019-10-02 12:06:15Z

1

You are not setting the value of input field because there is no binding with the value of text field to the state value so it's not updating the value of text field..

<TextField
    value = {this.state.value}
/>

edited Oct 2, 2019 at 12:06

answered Oct 2, 2019 at 11:31

bakar_dev

9965 silver badges13 bronze badges

3 Comments

ShocKwav3_ Over a year ago

please consider adding some explanation with your answer.

bakar_dev Over a year ago

sure...there is no binding with the value of text field to the state value so it's not updating the value of text field...i'll consider it next time. :)

ShocKwav3_ Over a year ago

Thank you for taking the time :) could you kindly edit your answer and add those there.

Ishan Joshi · Accepted Answer · 2019-10-02 11:29:34Z

0

I think you forgot to put the value field in the TextField. Try:

<TextField
    value = {this.state.value}
    onChange={this.handleChange}
    id="outlined-name"
    label="Image Search"
    margin="normal"
    variant="outlined"
    style={{minWidth:'500px'}}
    type="text"
/>

answered Oct 2, 2019 at 11:29

Ishan Joshi

5253 silver badges7 bronze badges

Comments

Doctor Strange · Accepted Answer · 2019-10-02 12:19:43Z

0

Your render function should be something like this, where Textfield value is coming from state.

render() {
const { value } = this.state;
return (
  <div>
    <form noValidate autoComplete="off" onSubmit={this.onFormSubmit}>
      <TextField
        onChange={this.handleChange}
        id="outlined-name"
        label="Image Search"
        margin="normal"
        variant="outlined"
        value={value}
        style={{ minWidth: "500px" }}
        type="text"
      />
      <br />
      <button variant="contained" color="primary" type="submit" />
    </form>
  </div>
);

}

answered Oct 2, 2019 at 12:19

Doctor Strange

112 bronze badges

Collectives™ on Stack Overflow

Can't empty input field after submit in React

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related