# React forms setting state

**URL:** <https://forum.freecodecamp.org/t/react-forms-setting-state/345753>\
**Category:** Curriculum Help\
**Tags:** javascript\
**Created:** [January 29, 2020, 8:21pm UTC](https://forum.freecodecamp.org/t/react-forms-setting-state/345753 "2020-01-29T20:21:28Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![egglearn](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/egglearn/32/151803_2.png) [@egglearn](https://forum.freecodecamp.org/u/egglearn)\
**Post date:** [January 29, 2020, 8:21pm UTC](https://forum.freecodecamp.org/t/react-forms-setting-state/345753/1 "2020-01-29T20:21:28Z")

</div>

````auto

having trouble with the handle submit, it sets submit in the state to event.target.value which is the same as the input right? Not sure what is going wrong

**Your code so far**
   
```jsx

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.value
  });
  // 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 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36`.

**Challenge:** Create a Controlled Form

**Link to the challenge:**

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/front-end-development-libraries/react/create-a-controlled-form)**
>
> Learn to Code — For Free

```auto

```

---

<div class="post-metadata">

**Author:** ![sanity](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sanity/32/378897_2.png) [@sanity](https://forum.freecodecamp.org/u/sanity)\
**Post date:** [January 29, 2020, 8:46pm UTC](https://forum.freecodecamp.org/t/react-forms-setting-state/345753/2 "2020-01-29T20:46:05Z")

</div>

You are not getting `event.target.value` when pressing button, you need to set submit value from the state.

---

<div class="post-metadata">

**Author:** ![egglearn](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/egglearn/32/151803_2.png) [@egglearn](https://forum.freecodecamp.org/u/egglearn)\
**Post date:** [January 29, 2020, 10:11pm UTC](https://forum.freecodecamp.org/t/react-forms-setting-state/345753/3 "2020-01-29T22:11:40Z")

</div>

im not sure i understand, am i not setting the submit in the state when i write ```

this.setState({  
submit: event.target.value  
});

```auto

```

---

<div class="post-metadata">

**Author:** ![sanity](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sanity/32/378897_2.png) [@sanity](https://forum.freecodecamp.org/u/sanity)\
**Post date:** [January 30, 2020, 5:04am UTC](https://forum.freecodecamp.org/t/react-forms-setting-state/345753/4 "2020-01-30T05:04:22Z")

</div>

What I meant is in the  
`submit: event.target.value`  
part `event.target.value` is `undefined`, so you need to take variable (`input`) from the state and use that to assign `submit`.

---

<div class="post-metadata">

**Author:** ![egglearn](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/egglearn/32/151803_2.png) [@egglearn](https://forum.freecodecamp.org/u/egglearn)\
**Post date:** [January 30, 2020, 6:50am UTC](https://forum.freecodecamp.org/t/react-forms-setting-state/345753/5 "2020-01-30T06:50:50Z")

</div>

thanks for the help, I passed the challenge now changing this setState code to the below, but I am suprised because I thought you should not refer to state in the setState?

```auto
this.setState({
    submit: this.state.input
  });

```

---

<div class="post-metadata">

**Author:** ![egglearn](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/egglearn/32/151803_2.png) [@egglearn](https://forum.freecodecamp.org/u/egglearn)\
**Post date:** [January 30, 2020, 6:56am UTC](https://forum.freecodecamp.org/t/react-forms-setting-state/345753/6 "2020-01-30T06:56:21Z")

</div>

ahh I read the documentation again, so I think this is right way to do it

```auto
this.setState((state) => ({
  submit: state.input 
}));

```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [March 12, 2021, 7:45pm UTC](https://forum.freecodecamp.org/t/react-forms-setting-state/345753/7 "2021-03-12T19:45:38Z")

</div>

Closed on March 12, 2021, 7:45pm UTC