Как вывести часть списка тем по-другому?

Question

Илья @sidorchik

React

Как вывести часть списка тем по-другому?

У меня есть список тем с подтемами. Эти данные я получаю c сервера и вставляю в стейт:

useEffect(() => {
	axios
		.get('http://sidorchik.ru/reshuege/api/')
		.then(response => response.data)
		.then(data =>
			data.map(topic => ({
				id: topic.id,
				title: topic.title,
				part: topic.part,
				subtopics: topic.subtopics.map(subtopic => ({
					id: subtopic.id,
					title: subtopic.title,
					amount: subtopic.amount,
					checked: true
				})),
				value: 0,
				checked: false
			}))
		)
		.then(data => setTopicsList(data))
		.catch(error => console.log(error));
}, []);

группирую темы по частям (Тестовая, Развернутая или Дополнительная):

const parted = topicsList.reduce(
    (acc, { id, part, title, value, checked, subtopics }) => {
        acc[part] = acc[part] || [];
        acc[part].push({
            id,
            title,
            value,
            checked,
            subtopics
        });
        return acc;
    },
    {}
);

добавляю разметку:

return Object.entries(parted).map(([part, topics], partI) => {
    let partName;
    switch (part) {
        case 'test':
            partName = (
                <div className="ConstructorForm-Row ConstructorForm-Row_label">
                    <div className="ConstructorForm-Topic">
                        Тестовая часть
                    </div>
                </div>
            );
            break;
        case 'detailed':
            partName = (
                <div className="ConstructorForm-Row ConstructorForm-Row_label">
                    <div className="ConstructorForm-Topic">
                        Развернутая часть
                    </div>
                </div>
            );
            break;
        case 'extra':
            partName = (
                <div className="ConstructorForm-Row ConstructorForm-Row_label">
                    <div
                        className="ConstructorForm-Topic Link Link_pseudo Link_wrap"
                        onClick={() => handleExtraPartNameClick()}
                    >
                        <u className="Link-U Link_pseudo-U Link_wrap-U">
                            Задания, не входящие в ЕГЭ этого года
                        </u>
                    </div>
                </div>
            );
            break;
        default:
            partName = null;
            break;
    }

    return (
        <div class="ConstructorForm-Part" key={partI}>
            {partName}
            {(part !== 'extra' ||
                (part === 'extra' && extraTopics)) &&
                topics.map(
                    (
                        { id, title, value, checked, subtopics },
                        i
                    ) => (
                        <div
                            className="ConstructorForm-Row"
                            key={'topic' + partI + i}
                        >

и вывожу:

return (
    {getContentByParts()}
);

Два вопроса.

1. Лучше ли сразу передавать в стейт группированный по частям список?

2. Как поступать с дополнительной частью? Её заголовок нужно вывести по-другому и скрыть содержание. Я сделал это сейчас, но мне кажется, код не очень. Подскажите, пожалуйста.

Если укажете, что ещё отрефакторить, буду благодарен.

Компонент на Гитхабе