Value of Form Input not updating on Submit in React - reactjs

Question

I am new to React and writing a basic program where using two input fields and a button I want to show the submitted data through another component.
I have declared state in the App component and used a handleChange and handleSubmit method. I have used this state data as props in Display component. But I am getting the data shown when input changes and not on submit.
Have a look at my code:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor(){
super();
this.state={
first:'',
last:''
}
this.handleChange=this.handleChange.bind(this);
//this.handleSubmit=this.handleSubmit.bind(this);
}
//handleChange method will capture the change in the values of input field
//Here [e.target.name]:e.target.value will set the input value to name="first" and name="last"
handleChange(e){
this.setState({
[e.target.name]:e.target.value
});
}
handleSubmit(e){
e.preventdefault();
this.handleChange();
}
render() {
return (
<div className="App">
<div class="row">
<input name="first" onChange={this.handleChange}type="text" value={this.state.first}></input>
</div>
<div class="row">
<input name="last" onChange={this.handleChange}type="text" value={this.state.last}></input>
</div>
<div class="row">
<input name="submit" type="button" onSubmit={this.handleSubmit}></input>
</div>
<Display name={this.state.first} last={this.state.last}/>
</div>
);
}
}
const Display=(props)=>{
return(
<div>
<div class="row">
{props.name}
</div>
<div class="row">
{props.last}
</div>
</div>
)
}
export default App;
Also can somebody explain me why do we write [e.target.name]:e.target.value
in setState and why do we right it as []?

Answer 1

The handleChange function that you have used sets the state to first and last states respectively when they change. This pattern is called Controlled Components in React.
On why we use [] in the handleChange function, as you have already pointed out in comments of your code, it is to set the state to first and last, which are also name properties of your inputs. This syntax is called Computed Property and you can find explanation on this in React docs.
If you want the Display component to pick up the state only when you press submit, the alternative is to maintain two separate states for them. One is for the form and another one is for the validated one that is displayed.
Demo:
const { Component } = React;
class App extends Component {
constructor(){
super();
this.state={
first:'',
last:''
}
this.handleSubmit=this.handleSubmit.bind(this);
}
handleSubmit(first, last){
this.setState({
first,
last,
})
}
render() {
return (
<div className="App">
<Form onSubmit={this.handleSubmit} />
<Display name={this.state.first} last={this.state.last}/>
</div>
);
}
}
class Form extends Component {
constructor(){
super();
this.state={
first:'',
last:''
}
this.handleChange=this.handleChange.bind(this);
this.handleSubmit=this.handleSubmit.bind(this);
}
handleChange(e){
this.setState({
[e.target.name]:e.target.value
});
}
handleSubmit(e) {
e.preventDefault();
this.props.onSubmit(this.state.first, this.state.last);
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<div className="row">
<input name="first" onChange={this.handleChange}type="text" value={this.state.first} />
</div>
<div className="row">
<input name="last" onChange={this.handleChange}type="text" value={this.state.last} />
</div>
<div className="row">
<input name="submit" type="submit" />
</div>
</form>
);
}
}
const Display=(props)=>{
return(
<div>
<div className="row">
{props.name}
</div>
<div className="row">
{props.last}
</div>
</div>
)
}
ReactDOM.render(<App />, document.getElementById("root"));
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="root"></div>