I want to Add a New Category and update the Category Array List when Clicking a Button

Question

When I click my Add Category button, nothing happens. I want to be able to add tasks and add new categories. When I add a category, the category should be added to the category array list and attached to the tasks array.

I have tried to create an addCats(e) function and added to the Add Category button's on click.

class TaskBar extends React.Component
{
    constructor(props){
        super(props);

        this.state = {
            tasks:[], 
            task: '',
            categories:["Home","Work","Play","X"],
            cats: ''

        };
        this.addTask = this.addTask.bind(this); 
        this.addCats = this.addCats.bind(this);

    }




addCats(e){
    if(this.state.cats !=="")
    {
        var newCategory = {
            text: this.state.cats,
            key: Date.now(),


        };



    this.setState(() => {
      this.state.categories.push(newCategory);
  });this.setState({cats: ''});


      }
      }


addTask(e){

   // console.log(this.state.task);
    if(this.state.task !== "")
    {
        var newTask = {

            text: this.state.task,
            key: Date.now(),
            categories:[]

        };

        this.setState(() => {
            this.state.tasks.push(newTask);
        });

       this.setState({task: ''});
      // console.log(this.state.task);
    }

    //console.log(this.state.tasks);
}

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} />    
            <br /><br /> 

            <input 
             value = {this.state.cats}
             placeholder = "Add Category" 
             onChange = {(event) => this.setState({cats:event.target.value})} 

            /> 
            <input type="button" value="Add Category" onClick={this.addCats} />    
            <br /><br /> 
            <div>
                <TaskList tasks={this.state.tasks} categories={this.state.categories}/>

            </div>


        </div>


    )

     }

  }



   export default TaskBar;

When I click Add Category,the page refreshes but displays nothing.

Possible duplicate of [Correct modification of state arrays in ReactJS](https://stackoverflow.com/questions/26253351/correct-modification-of-state-arrays-in-reactjs) — Alexander Staroselsky, Jul 23 '19 at 17:30
The issue with your code is that you are not correctly manipulating state. You are directly trying to `push` items to `this.state.categories` and similar rather than setting `categories` with the new array value. You need to first correct your setState() statements. The referenced question has many examples of properly updating arrays in state including both ES5 and ES6 approaches. — Alexander Staroselsky, Jul 23 '19 at 17:57
For example, you could do `this.setState(prevState => ({ categories: [...prevState.categories, newCategory] }))`, which comes from the examples in the linked question. That would be a more effective way to update `categories`. — Alexander Staroselsky, Jul 23 '19 at 18:03
I tried the way you just mentioned, however, the concat method worked from the reference ! Thanks!!! — Alasia Puckett, Jul 23 '19 at 18:17

score 0 · Answer 1 · answered Jan 16 '23 at 13:50

when you need to add category you must keep last data in array and add new data to array so in this case

    function CategoryMain() {
    const [dataCategory,setDataCategory] = useState([]);
    const [text,setText] = useState('')

    const addItem = ()=>{
    const newItem = [...dataCategory];
    const newData = {
    id:newItem.length + 1,
    title:text,
}

setDataCategory([...newItem,newData ]) 
setText('')
    }
    return(
    <div>
      <button onClick={addItem}>add Category</button>
    </div>
    )
    }

  

<!-- begin snippet: js hide: false console: true babel: false -->

I want to Add a New Category and update the Category Array List when Clicking a Button

1 Answers1