const [subtopicsList, setSubtopicsList] = useState([
{
id: 1,
checked: true,
subtopics: [
{id: '1.1', checked: true, title: 'Проценты', a_title: '24 шт', themeNumber: 249},
{id: '1.2', checked: true, title: 'Проценты И округление', a_title: '9 шт', themeNumber: 5},
]
}, {
id: 2,
checked: true,
subtopics: [
{id: '2.1', checked: true, title: 'Что-то еще', a_title: '24 шт', themeNumber: 249},
{id: '2.2', checked: true, title: 'И так далее', a_title: '9 шт', themeNumber: 5},
]
}
])
function handleTopicClick (ind) {
const list = [...subtopicsList]
list[ind] = {...list[ind], checked: !list[ind].checked}
setSubtopicsList(list)
}
const handleCheckboxChange = (ind, subind) => {
const list = [...subtopicsList]
const topic = list[ind] = {...list[ind]}
topic.subtopics = [...topic.subtopics]
topic.subtopics[subind] = {
... topic.subtopics[subind],
checked: ! topic.subtopics[subind].checked
}
setSubtopicsList(list)
};
{subtopicsList.map((topic, ind) => (<div
className="Topic"
onClick={e => { e.preventDefault(); handleTopicClick(ind)}}
key={topic.id}
>
{topic.checked && (
<div className="Topic-SubtopicList">
{topic.subtopics.map((subtopic, subind) =>
(<label className="Link_wrap ConstructorForm-TopicName Label">
<div className="ConstructorForm-TopicNumber">
<Checkbox
fakeCheckboxClassName="ConstructorForm-TopicSubCheckbox"
name={"subtopic" + subtopic.id}
value={subtopic.checked}
onChange={handleCheckboxChange(ind, subind)}
/>
</div>
<div className="ConstructorForm-TopicDesc">
{subtopic.title}
<a
href={"https://ege.sdamgia.ru/test?theme=" + subtopic.themeNumber}
className="Link Link_black"
>
{subtopic.a_title}
</a>
</div>
</label>))}
</div>
)}
</div>))}const [subtopicLists, setSubtopicLists] = useState(
(new Array(22)).reduce((obj, _, ind) => {
const key = ind < 20
? `subtopicList${ind + 1}`
: `extraSubtopicList${ind - 19}`
obj[key] = false
return obj
}, {})
){Object.keys(subtopicLists).map(key => (<div
className="Topic"
onClick={e => { e.preventDefault(); handleTopicClick(key)}}
key={key}
>
{subtopicLists[key] && (
<div className="Topic-SubtopicList">
...
</div>
)}
</div>))}Мерзкая, наглая ложь.