CODEWITHSUNDEEP
javascriptreactjsform-submitsubmit-button
user10995546
user10995546

Reputation: 77

Unable to clear input field automatically after clicking on submit (React)

I am new to react, and I am having trouble trying to make the input field clear automatically after clicking the submit button. I believe that I have made the component a fully controlled one by react, where the input value is solely dependent on the state's input. Hope someone is able to help. Been stuck for a few hours now. Really not sure where I've gone wrong. Thanks!

import React, { Component } from 'react'; 
import './App.css';
import Axios from 'axios';
import { Link, BrowserRouter, Route} from 'react-router-dom';
import reviews from './Screen/Reviews'; 

class App extends Component{

  constructor() {
    super();

    this.state = {
      movieName: '',
      setReview: ''
    };

    this.onMovieChange = this.onMovieChange.bind(this);
    this.onReviewChange = this.onReviewChange.bind(this);
    this.submitReview = this.submitReview.bind(this);

  }
  onMovieChange(e) {
    this.setState({
      movieName: e.target.value
    });
  }
  onReviewChange(e) {
    this.setState({
      setReview: e.target.value
    });
  }
  submitReview(e) {
    e.preventDefault();
    const movieName = this.state.movieName;
    const movieReview = this.state.setReview;
    Axios.post('http://localhost:3001/api/insert',
    {movieName: movieName, movieReview: movieReview}).then(()=>
    {
      alert('Insert successfully');  
    }
    ) 
    this.setState({
      movieName: '',
      setReview: ''
    })
  }
    
  render() {
    return (
      <BrowserRouter>
      <div className="form">
      <form   >
        <ul className="form-container">
          <li>
            <h2>Movie Review</h2>
          </li>  
          <li>
            <label htmlFor="movieName">
            Movie Name {" "}
            </label>
            <input className="movieName" type="movieName" name="movieName" id="movieName" onChange={this.onMovieChange}>
            </input>
          </li>
          <li>
            <label htmlFor="review">Review{" "}</label>
            <input className="review" type="review" id="review" name="review" onChange={this.onReviewChange}>
            </input>
          </li>
          <li> 
          <button onClick={this.submitReview}  type="submit" className="button-register-registration ">Submit</button>

          </li>

          <li>
            <Link to="/review" className="button-register-for-sign-in" ><h4>Go to reviews</h4></Link>
          </li>
        </ul>
      </form>
      <main>
        <div className="content">
        <Route path={"/review"} component={reviews}></Route> 
        </div>
      </main>
      </div>
    </BrowserRouter>
    );
  }

}

Upvotes: 0

Views: 484

Answers (2)

Victor Oliveira
Victor Oliveira

Reputation: 393

Praveen Mathew Philip's answer is correct and should fix your problem, but there are other issues with your code.

First, in your two inputs:

<li>
  <label htmlFor="movieName">
    Movie Name {" "}
  </label>
  <input className="movieName" type="movieName" name="movieName" id="movieName" onChange={this.onMovieChange}></input>
</li>
<li>
  <label htmlFor="review">Review{" "}</label>
  <input className="review" type="review" id="review" name="review" onChange={this.onReviewChange}></input>
</li>

There are no movieName and review types for input. You are probably looking for a type="text" instead. For a full list of possible inputs, refer to this

You could get away with just one handleChange function that would get your input's name from the event and keep your code cleaner.

Something along the lines:

handleChange(e) { this.setState({ [e.target.name]: e.target.value }) }

Finally, you could improve your code by using a tool called Prettier.

It would clean some indentation and replace some useless code such as

<Route path={"/review"} component={reviews}></Route>

by

<Route path="/review" component={reviews} />

And so on...

Upvotes: 0

Praveen
Praveen

Reputation: 303

you are treating input as an uncontrolled component, so react cannot control its value and hence not sync with its state. So make your input controlled by updating as below

  <input className="movieName" type="movieName" name="movieName" id="movieName" onChange={this.onMovieChange} value={this.state.movieName}>

Upvotes: 1

Related Questions