Create a Controlled Form, don't get why test aren't passing

JavaScript
1

Hey everyone, disclaimer: I am terrible with react so far.
Why is my code not passing the tests? The code seems to work just fine but the code keeps telling me
" The h1 header should render the value of the submit field from the component’s state."
I would appreciate any help.

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36 OPR/63.0.3368.94.

Link to the challenge:

2

Well you look like you know quite a bit to me and probably more than me. I don’t know if it is a code problem or a browser issue, but when I first came on here none of my work would pass a test from the beginning. I sat there for 20 mins and decided to use another browser and that was the issue. I don’t know if that would help you here, but it might be what is causing it.

I was automatically assuming that you have been on this site for a while since you are using javascript, but I could be wrong.

3

Tried it on Chrome, also didn’t work.
I’ve been here since July. Don’t confuse what I understand with what I can do!
React is hard. Best of luck when you get here.

4

Hahaha. I was looking at your name and thought it would be more fitting for me :).

5

try this

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) {
    event.preventDefault()
    this.setState({
      submit: this.state.input,
    })
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            onChange={(e) => this.handleChange(e)}
            value={this.state.input} 
            type="text" />
          <button type='submit'>Submit!</button>
        </form>
        <h1>{this.state.submit}</h1>
      </div>
    );
  }
};
6

you forgot the pass the parameter on the function handleChange and u accidentally double the brackets on your setState in handleSubmit