How to hide list items?

Question

JavaScript

Briefly, there is a file with a practically ready app

https://codesandbox.io/s/affectionate-taussig-dz4f...

I want only 3 elements of the data list to be shown when the page loads. And when you clicked "Show more", 5 elements of the list were loaded with a delay (like in prob'e), but the addition did not go beyond the data list.

At the same time, so that selectAll works on all checkboxes, including hidden ones.

Answer 1

Add the isCollapsed state.
Rendering isCollapse ? list.slice(0,3).map(mapcb) : list.map(mapcb)
example:
https://codesandbox.io/s/admiring-wood-q4otq3?file...
slice straight filtered list