Storing input value in array does not work (react) - reactjs

Question

When I submit a value to the input field it should push the value into an array, its fine as it perfectly logs the input value however it does not update the list array in state (this.state.list). It works the first time as it shows in an LI on the webpage however the value does not show in the console. However when I hit enter twice it works though.
import React from 'react';
class App extends React.Component{
constructor(props){
super(props )
this.state = {
input: "",
list: []
}
}
handleChange = (e) => {
this.setState({
input : e.target.value
})
}
handleSubmit = (e) => {
e.preventDefault()
console.log('A value was submitted into the input field --- ' + this.state.input)
const input = this.state.input
console.log(input)
let tasks = []
tasks.push(input)
this.setState({list: [...this.state.list, tasks]})
console.log(this.state.list);
}
render(){
return(
<div className="App">
Hello world
<form onSubmit={this.handleSubmit}>
<input onChange={this.handleChange} value={this.state.value} type="text"></input>
<li>
{this.state.list}
</li>
</form>
</div>
)
}
}
export default App;

Answer 1

i can spot two issues here based on my understanding
I think you are trying to push an entire array to the list when you use
let tasks = []
tasks.push(input)
this.setState({list: [...this.state.list, tasks]})
So each list element has a full array inside it
Secondly you are trying to view an entire array inside a list item
<li>
{this.state.list}
</li>
which should look like this:
<ul>
{this.state.list.map((item, index) => {
return <li key={index}>{item}</li>;
})}
</ul>
Try this:
import React from "react";
import "./styles.css";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
input: "",
list: []
};
}
handleChange = e => {
this.setState({
input: e.target.value
});
};
handleSubmit = e => {
e.preventDefault();
console.log("A value was submitted into the input field", this.state.input);
const input = this.state.input;
this.setState(
{ list: [...this.state.list, input] },
() = > {console.log("state.list", this.state.list)}
);
};
render() {
return (
<div className="App">
Hello world
<form onSubmit={this.handleSubmit}>
<input
onChange={this.handleChange}
value={this.state.value}
type="text"
/>
<ul>
{this.state.list.map((item, index) => {
return <li key={index}>{item}</li>;
})}
</ul>
</form>
</div>
);
}
}
export default App;

Answer 2

React state updates are asynchronous, so the console.log(this.state.list); will only display the state of the current render cycle. All state updates during a render cycle are queued up and batch processed during reconciliation before the next render/commit phases run. If you use the setState callback you can log the updated state.
this.setState(
{
list: [...this.state.list, tasks]
},
() => console.log(this.state.list)
);
The reason it works upon the second press of enter is you've submitted the form again, reset state and you log the result of the previous state update.

Answer 3

That's because setState gets invoked asynchronously.
If you want to do something once setState is invoked, you can pass a callback.
this.setState({list: [...this.state.list, tasks]}, () => { console.log(this.state.list); })

Answer 4

It does not change immediately: use callback of state change to log:
this.setState({list: [...this.state.list, tasks]},
()=>console.log(this.state.list))