Tell us what’s happening:
hello, i am having trouble trying to understand the last bit of the problem where it is submit property state should be equal to the input and rendering the submit part in the components state.
**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({
form: 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.input}</h1>
{/* Change code above this line */}
</div>
);
}
}
**Your browser information:**
User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.58 Safari/537.36
¡Hi!
I see you are trying to set the value of a “form” state that doesn’t exist. Actually, you need to set the state value of “submit” in your handleSubmit method. Also, you can not access to the input value throught “event.target.value” on this method. For asigning the value of input, access it from it state (this.state.input).
Besides, you never created the “onClick” event for the submit button in your form.
And the last point, the challenge ask you to show in the h1 tag the value of “submit” state, instead “input”.
@zaklina Try to explain the problem and what is needed to solve the challenge instead of just posting solution code.
@nicolas.oleinizak You do not need an onClick. The form submit is handled using onSubmit which calls the method handleSubmit. The button inside a form is a submit button by default but it also has the type='submit' attribute.
There is no form property on the state object. There is a submit property.
The submit property should be set to the value of the input state property.
The value shown in the h1 should be the submit state property.
We like that users help each other, but we (the mods) just have to try and keep it spoiler-free and make corrections if needed. Please do keep helping out, it’s always appreciated.
Are you asking why you have to use this.state.input for the this.state.submit value, instead of event.target.value?
You can try to log out event.target.value inside the handleSubmit handler and see what you get. Hint: the event.target is the form element and it does not have a value attribute. The value is on the input element, not the form, and you get that value using the state you set in the handleChange handler function.
You can technically get to the input element from the form target using firstElementChild but that isn’t the correct way of doing it here.