Create a Controlled Form advice

1 
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({submit:event.target.firstElementChild.value})
    
    // change code above this line
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit} >
          { /* change code below this line */ }
          <input type="text" className='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 */ }
        <h5>{this.state.input}</h5>
      </div>
    );
  }
};

It is changing submit and input property value.but there are some problem

2

Hi @Tovuzlu, could you give a link to the free code camp lesson? And can your further explain what is the problem?

3

no. I dont know what is problem.
just freecodecam dont accept it
https://www.freecodecamp.org/learn/front-end-libraries/react/create-a-controlled-form

4

You should then complete the handleSubmit method so that it sets the component state property submit to the current input value in the local state .

So you have to take input value not from the event, but from the current state.

1 Like
6

Thanks.i did but now i have a problem. Typing in the input element should update the input property of the component's state.

7

@Tovuzlu you are missing a prop that should be placed on your input element. Take a guess at what it is. If not, take a look at the lesson before this one.

8

:thinking:
Thanks pakatagoh

1 Like