seo Question posted in
Some basic information to get you started with this can be found here.

Issue with data manipulate in react with map operator? – SEO

Hi i m some issue with the react setState in react like this

this is my data 

this.state = {
            _toDoData :  [
                {id:'1', title:'Lang Tag on Hindi', label:'toDo', priority:'Major', ticketId:'ETUIOPS-1', assignee:'Rohit'},
                {id:'2', title:'Template Meta Tag Change about page', label:'readyForDevelopment', priority:'Critical', ticketId:'ETUIOPS-2', assignee:'Rohit Azad'},
                {id:'3', title:'Currency Converter change', label:'inProgress', priority:'Critical', ticketId:'ETUIOPS-3', assignee:'Rohit Malik'},
                {id:'4', title:'SEO Rule change', label:'inQa', priority:'Critical', ticketId:'ETUIOPS-4', assignee:'Rohit Malik'},
                {id:'5', title:'Implement Live tv', label:'live', priority:'Critical', ticketId:'ETUIOPS-5', assignee:'Rohit Malik'}
            ],
            showTodoText : 'Click to show ToDo items',
            showHideToDo:false,
            TO_DO:[],
            READY_FOR_DEVELOPEMENT:[],
            IN_PROGRESS:[],
            IN_QA:[],
            LIVE:[]
        }

and after that i call to this function 

toDoManupulateData = ()=>{
    let allToDoData = this.state._toDoData;
    let TO_DO = [];
    let READY_FOR_DEVELOPEMENT = [];
    let IN_PROGRESS = [];
    let IN_QA = [];
    let LIVE = [];
    allToDoData.map((item)=>{
        if(item.label === 'toDo'){
            TO_DO.push(item);
        }else if(item.label === 'readyForDevelopment'){
            READY_FOR_DEVELOPEMENT.push(item);
        }else if(item.label === 'inProgress'){
            IN_PROGRESS.push(item);
        }else if(item.label === 'inQa'){
            IN_QA.push(item);
        }else if(item.label === 'live'){
            LIVE.push(item);
        }
        return console.log(item);
    });
    console.log(TO_DO,READY_FOR_DEVELOPEMENT,IN_PROGRESS,IN_QA,LIVE);
    return this.setState({
        TO_DO,READY_FOR_DEVELOPEMENT,IN_PROGRESS,IN_QA,LIVE
    });

}

after that i call to react function like this 

componentDidMount(){
    console.log(this.state)
    this.toDoManupulateData();
    console.log(this.state)
}

But my state is blank why can u please guide me.

Tags:

3

Answers


  1. 0

    setState is asynchronous. If you want to log the state after updating it, use the second argument callback.

    return this.setState({
    TO_DO,READY_FOR_DEVELOPEMENT,IN_PROGRESS,IN_QA,LIVE
}, () => console.log(this.state);
    Login or Signup to reply.
  2. 0

    Your toDoManupulateData should look like this.

    toDoManupulateData = ()=>{
    let allToDoData = this.state._toDoData;
    let TO_DO = [];
    let READY_FOR_DEVELOPEMENT = [];
    let IN_PROGRESS = [];
    let IN_QA = [];
    let LIVE = [];
    allToDoData.map((item)=>{
        if(item.label === 'toDo'){
            TO_DO.push(item);
        }else if(item.label === 'readyForDevelopment'){
            READY_FOR_DEVELOPEMENT.push(item);
        }else if(item.label === 'inProgress'){
            IN_PROGRESS.push(item);
        }else if(item.label === 'inQa'){
            IN_QA.push(item);
        }else if(item.label === 'live'){
            LIVE.push(item);
        }
    });
    console.log(TO_DO,READY_FOR_DEVELOPEMENT,IN_PROGRESS,IN_QA,LIVE);
    this.setState({
            TO_DO:TO_DO,
            READY_FOR_DEVELOPEMENT:READY_FOR_DEVELOPEMENT,
            IN_PROGRESS:IN_PROGRESS,
            IN_QA:IN_QA,
            LIVE:LIVE
        },() => console.log(this.state));

}

componentDidMount(){
    console.log(this.state)
    this.toDoManupulateData();
}
    Login or Signup to reply.
  3. 0

    First of all I don’t think you need to use map method, instead use forEach. Also setState is updates the state in async mode, which means setState does not updates the state as soon as it is called. If really want to check there the state got updated pass callback function to setState and check your state there.

    toDoManupulateData = ()=>{
    let allToDoData = this.state._toDoData;
    let TO_DO = [];
    let READY_FOR_DEVELOPEMENT = [];
    let IN_PROGRESS = [];
    let IN_QA = [];
    let LIVE = [];
    allToDoData.forEach((item)=>{
        if(item.label === 'toDo'){
            TO_DO.push(item);
        }else if(item.label === 'readyForDevelopment'){
            READY_FOR_DEVELOPEMENT.push(item);
        }else if(item.label === 'inProgress'){
            IN_PROGRESS.push(item);
        }else if(item.label === 'inQa'){
            IN_QA.push(item);
        }else if(item.label === 'live'){
            LIVE.push(item);
        }
        console.log(item);
    });
    console.log(TO_DO,READY_FOR_DEVELOPEMENT,IN_PROGRESS,IN_QA,LIVE);
    this.setState({
        TO_DO,READY_FOR_DEVELOPEMENT,IN_PROGRESS,IN_QA,LIVE
    }, () => {
       console.log(this.state);
    });
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search