Designing a Sorted List with Sub-headers

Like for many of you, the process of solving a coding challenge provides me a rich learning experience. It’s rarely a straight path, but the deviations, the ‘rabbit holes’, while not included in the final solution, frequently lead to a deeper understanding of the principals of coding. My latest project, and a particular (seemingly innocuous) feature I chose to add, leads me to this week’s exploration.

Image for post
Image for post
Photo by Peter Wendt on Unsplash
Image for post
Image for post
The UI
const sortList = () => {
const sorted = {}
const divs = [];
// separate items into category objects curList.forEach(item => {
if (!sorted[item.category]) {
sorted[item.category] = [item];
} else {
sorted[item.category].push(item);
}
})
// iterate through each category object creating a <ListGroup/> component along with the category label and specific items for that category. for (let group in curList) {
divs.push(<ListGroup
category={group}
items={curList[group]
key={group} />);
}
return divs;}
case 'ADD_TO_LIST':newList = Object.assign({}, state.curList)
if (newList[action.payload.category]) {
newList[action.payload.category].push(action.payload)
} else {
newList[action.payload.category] = [action.payload]
}
return { ...state, curList: newList }

After years of teaching music in Austin, Shanghai and Yangon, I’m making a career change to my other passion, software development.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store