Filter results of array of objects in React, using Filter and state

Question

I am trying to filter through an array based on checkboxes. When these are ticked, it would show the elements with those attributes (viewable, reported etc). I am having issues with the filter function.

I tried using the forEach method, but that becomes messy with trying to keep the last checkboxes results the same. So I've decided to keep those values the same using state, then to filter the results based on the state. However I am being told 'Cannot read property 'state' of undefined' even though my console log shows the viewable and reported values as 1s or 0s. Not sure what's going wrong but would appreciate a solution to the problem, especially if I'm on the wrong track!

handleCheck = (e) => {
        if (e.target.checked) {
            this.setState ({
                [e.target.name]: '1'
            })
        } else {
            this.setState ({
                [e.target.name]: '0'
            })
        }
        console.log(this.state);
        this.filterPosts();

    }


    filterPosts = () => {
        this.setState ({
            parentArray: this.props.parentResults
        })

        var filterArray = this.state.parentArray.filter(function(element) {
            if (this.state.viewable===1 && this.state.reported===1) {
                return element.viewable===1 && element.reportCount>0
            } else if (this.state.viewable===1 && this.state.reported===0) {
                return element.viewable===1 && element.reportCount===0
            } else if (this.state.viewable===0 && this.state.reported===1) {
                return element.viewable===0 && element.reportCount>0
            } else if (this.state.viewable===0 && this.state.reported===0) {
                return element.viewable===0 && element.reportCount===0
            }
        }); 

        console.log(filterArray);
    }

The parentArray comes from the props, and definitely works as I've been able to use forEach methods. I then alter state using checkboxes, and am trying to use this to modify the filter function.

Just want the posts that are viewable or reported to appear and disappear as you check the boxes. Cheers!

Are you initializing parentArray when you call the filterPosts function? — octobus, Jul 16 '19 at 14:20
@octobus, yes, as I can't seem to do so in componentWill/DidMount as it happens too late and the array appears empty in the state. — jonasiri, Jul 16 '19 at 14:33
I also tried to use this.props.parentResults directly in the filter but no luck. — jonasiri, Jul 16 '19 at 14:35
Possible duplicate of [Why calling react setState method doesn't mutate the state immediately?](https://stackoverflow.com/questions/30782948/why-calling-react-setstate-method-doesnt-mutate-the-state-immediately) — Emile Bergeron, Jul 16 '19 at 14:38

score 0 · Answer 1 · answered Jul 16 '19 at 14:40

The reason you are getting the error is that setState works asynchronously. So when you try to filter your array it is still not initialized.

You should either initialize your parentArray in constructor as

    constructor(props){
      super(props);
      this.state = {
          parentArray: this.props.parentResults,}

    }

or either just filter your this.props.parentResults in your filter posts function like

filterPosts = () => {
    var filterArray = this.props.parentResults.filter(function(element) {
        if (this.state.viewable===1 && this.state.reported===1) {
            return element.viewable===1 && element.reportCount>0
        } else if (this.state.viewable===1 && this.state.reported===0) {
            return element.viewable===1 && element.reportCount===0
        } else if (this.state.viewable===0 && this.state.reported===1) {
            return element.viewable===0 && element.reportCount>0
        } else if (this.state.viewable===0 && this.state.reported===0) {
            return element.viewable===0 && element.reportCount===0
        }
    }); 

    console.log(filterArray);
}

Unfortunately initialising in the constructor results in a blank array, seems like props are arriving after that stage. I fixed it by turning it into an arrow function though, now just need a better way of going through all possible permutations when I add two more checkboxes! Thanks! — jonasiri, Jul 16 '19 at 15:18
Can you try initializing like this.state = { parentArray: [...this.props.parentResults],} — octobus, Jul 16 '19 at 16:26

Filter results of array of objects in React, using Filter and state

1 Answers1