props not being passed properly - reactjs - reactjs

Question

I have two components, one of which is used for filling out a form, the other is for displaying the input once it is submitted. However, it currently only displays the input until the form is submitted, and then it goes away. What is happening to the state of the parent component when the form is submitted?
class Form extends Component {
constructor(props) {
super(props);
this.state = {
equation: null
};
}
render() {
return (
<div>
<form onSubmit={this.mySubmitHandler}>
<input
type="text"
name="equation"
onChange={this.handleInputChange}
/>
</form>
<Parser value={this.state.equation}/>
</div>
);
}
handleInputChange = event => {
event.preventDefault();
this.setState({
[event.target.name]: event.target.value
});
};
mySubmitHandler = event => {
event.preventDefault();
this.setState({ equation: event.target.value });
alert("You are submitting " + this.state.equation);
console.log(this.state.equation);
};
}
class Parser extends Component {
render() {
return <div>{this.props.value}</div>;
}

Answer 1

The problem here is the event.target.value from the form submit event.
Since the event is coming from form submit, the target element is form and there is no value in the target element.
Update the component like below will solve your problem.
import React, {Component } from 'react';
export default class Hello extends Component {
constructor(props) {
super(props);
this.state = {
equation: null
};
}
render() {
return (
<div>
<form onSubmit={this.mySubmitHandler}>
<input
type="text"
name="equation"
onChange={this.handleInputChange}
/>
<button type="submit">Submit</button>
</form>
<Parser value={this.state.equation}/>
</div>
);
}
handleInputChange = event => {
event.preventDefault();
this.setState({
[event.target.name]: event.target.value
});
};
mySubmitHandler = event => {
event.preventDefault();
alert("You are submitting " + this.state.equation);
console.log(this.state.equation);
};
}
class Parser extends Component {
render() {
return <div>{this.props.value}</div>;
}
}
Check the stackblitz solution.Stackblitz

Answer 2

In mySubmitHandler, event.target.value is undefined, which is why the Parser text is disappearing. If you need to use equation in the submit handler, just use this.state.equation because it is has already been set via handleInputChange
mySubmitHandler = event => {
event.preventDefault();
// event.target.value is undefined
// this.state.equation has already been set via this.handleInputChange
this.setState({ equation: event.target.value });
alert("You are submitting " + this.state.equation);
console.log(this.state.equation);
};

Answer 3

You should not be using this.setState({equation: event.target.value}); in mySubmitHandler.
The event.target for submit is the form itself and it has no value.
Therefore it sets equation to undefined.
The reason you see the correct state when you console.log() it is because setState is async and the state in that function call still has the old value with it.
Remove it and see if it works.

Answer 4

You need to maintain two states equation and inputequation.
Now when you change input setstate inputequation. When you submit setstate equation to inputequation.
And one more thing
<input value={this.state.inputequation}/>
input should be controlled via your state.

Answer 5

Here, I modified the handleInputChange and mySubmitHandler you use this
handleInputChange = event => {
event.preventDefault();
this.setState({
equation: event.target.value
});
};
mySubmitHandler = event => {
event.preventDefault();
alert("You are submitting " + this.state.equation);
console.log(this.state.equation);
};

Answer 6

You should check this stackblitz solution
I have used your code.
import React, { Component } from 'react';
class Form extends Component {
constructor(props) {
super(props);
this.state = {
equation: null
};
}
render() {
return (
<div>
<form onSubmit={this.mySubmitHandler}>
<input
type="text"
name="equation"
onChange={this.handleInputChange}
/>
</form>
<Parser value={this.state.equation}/>
</div>
);
}
handleInputChange = event => {
this.setState({
[event.target.name]: event.target.value
});
};
mySubmitHandler = event => {
event.preventDefault();
alert("You are submitting " + this.state.equation);
};
}
class Parser extends Component {
render() {
return <div>{this.props.value}</div>;
}
}

Answer 7

Simple fix. You are accessing the incorrect property of the form.
this.setState({ equation: event.target.value });
This needs to be the name of the form element which is equation:
this.setState({ equation: event.target.equation.value });
Your updated handler:
mySubmitHandler = event => {
event.preventDefault();
this.setState({ equation: event.target.equation.value });
};
JSFiddle