Experiencing strange behavior in react using Visual Studio - reactjs

Question

I am playing around with a simple task manager project in react. When I add values to my task list array, the render as expected. However when I add values to my categories array the screen goes blank/white and no messages appear in the error log. Has anyone encountered this or is there an error in my code I am overlooking perhaps? below is the taskbar.js
I have looked through the different console views to try and find any related errors but to no avail. Everything compiles fine.
import React from 'react';
import ReactDOM from 'react-dom';
import TaskList from './taskList.js';
import TaskCategories from './taskCats.js';
class TaskBar extends React.Component
{
constructor(props){
super(props);
this.state = {
tasks:[],
task: '',
categories:["Home","Work","Play"],
cat: ''
};
this.addTask = this.addTask.bind(this);
this.addCat = this.addCat.bind(this);
}
addTask(e){
if(this.state.task !== "")
{
var newTask = {
text: this.state.task,
key: Date.now(),
categories:[]
};
this.setState(() => {
this.state.tasks.push(newTask);
});
this.setState({task: ''});
}
}
addCat(e){
if(this.state.cat !== "")
{
var newCat = {
text: this.state.cat,
key: Date.now(),
tasks:[]
};
this.setState(() => {
this.state.categories.push(newCat);
});
this.setState({cat: ''});
}
}
componentDidUpdate(){
console.log(this.state.tasks);
console.log(this.state.categories);
}
render(){
return (
<div className="inputArea cols-md-6">
<input
value = {this.state.task}
placeholder = "Enter task"
onChange = {(event) =>
this.setState({task:event.target.value})} />
<input type="button" value="Add Task" onClick={this.addTask}
/>
<input
value = {this.state.cat}
placeholder = "Enter category"
onChange = {(event) => this.setState({cat:event.target.value})}
/>
<input type="button" value="Add Category" onClick={this.addCat}
/>
<br /><br />
<div>
<TaskList tasks={this.state.tasks} categories=
{this.state.categories}/>
</div>
</div>
)
}
}
export default TaskBar;
I would expect a new category will be added to the category list.

Answer 1

Better to pass new array and not mutate original and you aren't setting the state property
Try this approach for your arrays
this.setState({tasks: [...this.state.tasks, newTask]});
// and
this.setState({categories: [...this.state.categories, newCat]})