Controlled form challenge problem

JavaScript
1

Tell us what’s happening:

Hello people,

I checked the hint on this one because I didn’t come up with the idea to set input to empty string, and set submit equal to this.state.input. Even though it was written in the task description, I don’t understand why set submit equal to input , I mean those are two different properties, isn’t it convoluted to make them the same?

And if the user enters the value, which then gets passed to state, after submitting we are setting that input equal to nothing? That’s totally baffling to me. Why do that?

Your code so far


class MyForm extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: '',
    submit: ''
  };
  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
  this.setState({
    input: event.target.value
  });
}
handleSubmit(event) {
  // change code below this line
  event.preventDefault();
  this.setState({
    input: '',
    submit: this.state.input
    
  })
  // change code above this line
}
render() {
  return (
    <div>
      <form onSubmit={this.handleSubmit}>
        { /* change code below this line */ }
<input value={this.state.input} onChange={this.handleChange}/>
        { /* change code above this line */ }
        <button type='submit'>Submit!</button>
      </form>
      { /* change code below this line */ }
      <h1>{this.state.submit}</h1>
      { /* change code above this line */ }
    </div>
  );
}
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36.

Challenge: Create a Controlled Form

Link to the challenge:
https://www.freecodecamp.org/learn/front-end-libraries/react/create-a-controlled-form

2

When you click the submit button; the Input state is moved into the Submit state and the text box is cleared. This saves the old input and allows you to make a new one…

hard for me to put into words… Let’s say you want to make a calculator :slight_smile: (one of the upcoming projects)
https://codepen.io/freeCodeCamp/full/wgGVVX (see what happens when you do 5+5=+5=+5=+5= …etc) hopefully that makes some sense.

1 Like
3

hm, I kind of get it…but where did we put the condition when the new value is entered, that the old input is empty? I mean, how can we know that it will not delete input and set it to empty in the state?