how to fix "Cannot read property 'options' of null" in this code? - reactjs

Question

I want to add the user to the options array which I have defined inside the state. Problem is whenever I use prevstate.options.concat([username]). it shows this error. While when I just push username using this.state.push(username) to the array no error occurs. But for good practice in React we never alter directly the state variable, that's why I was using prevstate so I want to know why I am getting this error.
As I am getting value of user and this.state.options also showing in the console when I declare inside adduserso I want to know why my setState is not working using prevstate variable?
class Login extends React.Component{
constructor(props){
super(props);
this.addUser = this.addUser.bind(this)
this.State = {
options : ['hello']
}
}
addUser(username){
console.log(username)
console.log(this.State.options)
this.State.options.push(username)
this.setState((prevState)=>{
// console.log(prevState.options)
return {
options : prevState.options.concat([username])
}
})
}
render(){
return(
<div>
<Form addUser = {this.addUser}/>
</div>
);
}
}
class Form extends React.Component{
constructor(props){
super(props);
this.formData = this.formData.bind(this);
}
formData(e){
e.preventDefault();
const username = e.target.elements.user.value.trim();
console.log(username);
this.props.addUser(username);
}
render(){
return(
<div>
<form onSubmit={this.formData}>
Name: <input type="text" name="user"></input>
<input type ="submit"></input>
</form>
</div>
)
}
}
ReactDOM.render(<Login /> , document.getElementById('app'));
actual result would be to concat a user in the options array using setState

Answer 1

Okay I have mocked your component in a sandBox and the following seems to be working. Here is the sandBox: https://codesandbox.io/s/mq3qyvvjkx
You're issue seems to have been using this.State instead of this.state (lower case s) multiple times in your component. And this looks why you were receiving your error.
class Login extends React.Component {
constructor(props) {
super(props);
this.addUser = this.addUser.bind(this);
this.state = {
options: ["hello"]
};
}
addUser(username) {
console.log(username);
console.log(this.state.options);
this.state.options.push(username);
this.setState(prevState => {
// console.log(prevState.options)
return {
options: prevState.options.concat([username])
};
});
}
render() {
return (
<div>
<Form addUser={this.addUser} />
</div>
);
}
}
class Form extends React.Component {
constructor(props) {
super(props);
this.formData = this.formData.bind(this);
}
formData(e) {
e.preventDefault();
const username = e.target.elements.user.value.trim();
console.log(username);
this.props.addUser(username);
}
render() {
return (
<div>
<form onSubmit={this.formData}>
Name: <input type="text" name="user" />
<input type="submit" />
</form>
</div>
);
}
}
The following produces the following console outputs, with no console errors.
Corbuk
Corbuk
["hello", "corbuk"]
Please let me know if this is the expected output?