How to calculate number of true members in state and update to the screen?

I’m recently working with react.js and want to create a todo-app. In my state, I write the following:

this.state={tasks: [ ["Eat",true],
["Sleep",false],
["Read",true]]}

This state will be rendered into different checkboxs.

And in the content I want to render:

<div className="todo-app__total">{Num} Left</div>

The Num here is the variable I want to demonstrate how many items are there that are still not completed (false). In the above case, Num=2.

The other buttons are functioning properly now, so the state may dynamically change through time, but I hope that Num can change simultaneously when the state has been updated.

How do I collect the number of true members, while they are not in the same array (In same column)?

Answer

Assuming you have an object like,

{name: ‘Sleep’, completed: false}

you can check as follows,

items.filter(item=>item.completed == true)?.length