У меня есть список тем с подтемами. Эти данные я получаю 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. Как поступать с дополнительной частью? Её заголовок нужно вывести по-другому и скрыть содержание. Я сделал это сейчас, но мне кажется, код не очень. Подскажите, пожалуйста.
Если укажете, что ещё отрефакторить, буду благодарен.
Компонент на Гитхабе 
