Reactjs css-grid css-flexBox

What are you most proud of, and what would you do differently next time?

Glad I could complete the challenge but next time I need to be prepared on when/where to implement array method effectively so that I can be efficient next time

What challenges did you encounter, and how did you overcome them?

Knowing on how to handle the active and inActive feature with the remove list button and toggle list to update it active value. Dealing with it I thought it was easy base on what how I implement it but that wasn't the case. i.e at first I was trying to filter them on one single state, anytime I click on active "yes" it works but now when I click on all it doesn't give me both active and inActive instead I just get the active only same goes for inActive.

solution

Create another state that keeps the array value

const [extensionListItem, setExtensionListItem] = useState(extensionLists);
const [masterList, setMasterList] = useState(extensionLists);
function allList() {
    setExtensionListItem(masterList); // get all list from masterList
}
function activeList() {
    setExtensionListItem(masterList.filter((list) => list.isActive)); // get active list from masterList
}
function inActiveList() {
    setExtensionListItem(masterList.filter((list) => !list.isActive)); // get inActive list from masterList
}