Как мне рендерить блоки html динамически, используя ReactJS?

Question

Я борюсь с возможностью динамического рендеринга html элементов на моей боковой панели. В настоящее время это настроено только для получения списка проектов не менее 1, но не более 5, а также 1-5 подпроектов. HTML жестко закодирован, и мне было интересно, есть ли способ просто повторно использовать один и тот же блок HTML для каждого элемента в списке проектов.

import React, { useContext, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { DashboardContext } from '../dashboardContext/DashboardContext'
import './sidebar.css'
import Accordion from 'react-bootstrap/Accordion'
import Card from 'react-bootstrap/Card'
import './homeicon.png'

function Sidebar() {
    const [view, setView] = useContext(DashboardContext)

    var host = "http://localhost:3000/"
    var config = view.configFile
    var itemToFetch = host + config
    const data = view.configInput

    useEffect(() => {
        async function fetchData() {
            const res = await fetch(itemToFetch);
            res
                .json()
                .then(res => setConfigData(res));
        }
        fetchData();
        // eslint-disable-next-line react-hooks/exhaustive-deps,
    }, [view.configFile]); //fetchData when view.configFile changes

    //have to make separate setter functions because otherwise the whole view gets overwritten (i.e., with "undefined")
    const setProject = (name) => {
        setView({ ...view, name: name });
    }

    const setConfigData = (data) => {
        setView({ ...view, configInput: data })

    }

    if (data == null) {
        return (null)
    }

    // NEEDS HELP
    //currently this is only set up to receive project lists of at least 1 but up to 5
    //the number of subprojects can be up to 6 (the compiler doesn't complain about having the expected number of subprojects if it's below that)
    else if (data != null) {
        return (
            <div className="sidebar">
                <Accordion>
                    <Link to='/dashboard'>
                        <img className="home-img" alt="a house" src={require('./homeicon.png')} />
                        <p className="homeTitle" onClick={() => setProject(view.configFile)}>Home</p>
                    </Link>

                    {/* Group 1 */}
                    <Card>
                        <Accordion.Toggle as={Card.Header} eventKey="0">
                            <p>{data[0].projectName}</p>
                        </Accordion.Toggle>
                        <Accordion.Collapse eventKey="0">
                            <Card.Body>
                                <Link to='/dashboard'>
                                    <p onClick={() => setProject(data[0].nickname)}>{data[0].projectName} Overall</p>
                                </Link>
                                <Link to='/dashboard'>
                                    <p onClick={() => setProject(data[0].subprojectNicknames[0])}>{data[0].subprojects[0]}</p>
                                </Link>
                                <Link to='/dashboard'>
                                    <p onClick={() => setProject(data[0].subprojectNicknames[1])}>{data[0].subprojects[1]}</p>
                                </Link>
                                <Link to='/dashboard'>
                                    <p onClick={() => setProject(data[0].subprojectNicknames[2])}>{data[0].subprojects[2]}</p>
                                </Link>
                                <Link to='/dashboard'>
                                    <p onClick={() => setProject(data[0].subprojectNicknames[3])}>{data[0].subprojects[3]}</p>
                                </Link>
                                <Link to='/dashboard'>
                                    <p onClick={() => setProject(data[0].subprojectNicknames[4])}>{data[0].subprojects[4]}</p>
                                </Link>
                                <Link to='/dashboard'>
                                    <p onClick={() => setProject(data[0].subprojectNicknames[5])}>{data[0].subprojects[5]}</p>
                                </Link>
                            </Card.Body>
                        </Accordion.Collapse>
                    </Card>

                    {/* Group 2 */}
                    {(data.length >= 2) ? <div>
                        <Card>
                            <Accordion.Toggle as={Card.Header} eventKey="1">
                                <p>{data[1].projectName}</p>
                            </Accordion.Toggle>
                            <Accordion.Collapse eventKey="1">
                                <Card.Body>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[1].nickname)}>{data[1].projectName} Overall</p>
                                    </Link>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[1].subprojectNicknames[0])}>{data[1].subprojects[0]}</p>
                                    </Link>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[1].subprojectNicknames[1])}>{data[1].subprojects[1]}</p>
                                    </Link>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[1].subprojectNicknames[2])}>{data[1].subprojects[2]}</p>
                                    </Link>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[1].subprojectNicknames[3])}>{data[1].subprojects[3]}</p>
                                    </Link>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[1].subprojectNicknames[4])}>{data[1].subprojects[4]}</p>
                                    </Link>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[1].subprojectNicknames[5])}>{data[1].subprojects[5]}</p>
                                    </Link>
                                </Card.Body>
                            </Accordion.Collapse>
                        </Card>
                    </div>
                        : ''}


                    {/* Group 3 */}
                    {(data.length >= 3) ? <div>
                        <Card>
                            <Accordion.Toggle as={Card.Header} eventKey="2">
                                <p>{data[2].projectName}</p>
                            </Accordion.Toggle>
                            <Accordion.Collapse eventKey="2">
                                <Card.Body>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[2].nickname)}>{data[2].projectName} Overall</p>
                                    </Link>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[2].subprojectNicknames[0])}>{data[2].subprojects[0]}</p>
                                    </Link>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[2].subprojectNicknames[1])}>{data[2].subprojects[1]}</p>
                                    </Link>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[2].subprojectNicknames[2])}>{data[2].subprojects[2]}</p>
                                    </Link>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[2].subprojectNicknames[3])}>{data[2].subprojects[3]}</p>
                                    </Link>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[2].subprojectNicknames[4])}>{data[2].subprojects[4]}</p>
                                    </Link>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[2].subprojectNicknames[5])}>{data[2].subprojects[5]}</p>
                                    </Link>
                                </Card.Body>
                            </Accordion.Collapse>
                        </Card>
                    </div>
                        : ''}


                    {/* Group 4 */}
                    {(data.length >= 4) ? <div>
                        <Card>
                            <Accordion.Toggle as={Card.Header} eventKey="3">
                                <p>{data[3].projectName}</p>
                            </Accordion.Toggle>
                            <Accordion.Collapse eventKey="3">
                                <Card.Body>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[3].nickname)}>{data[3].projectName} Overall</p>
                                    </Link>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[3].subprojectNicknames[0])}>{data[3].subprojects[0]}</p>
                                    </Link>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[3].subprojectNicknames[1])}>{data[3].subprojects[1]}</p>
                                    </Link>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[3].subprojectNicknames[2])}>{data[3].subprojects[2]}</p>
                                    </Link>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[3].subprojectNicknames[3])}>{data[3].subprojects[3]}</p>
                                    </Link>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[3].subprojectNicknames[4])}>{data[3].subprojects[4]}</p>
                                    </Link>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[3].subprojectNicknames[5])}>{data[3].subprojects[5]}</p>
                                    </Link>
                                </Card.Body>
                            </Accordion.Collapse>
                        </Card>
                    </div>
                        : ''}


                    {/* Group 5 */}
                    {(data.length >= 5) ? <div>
                        <Card>
                            <Accordion.Toggle as={Card.Header} eventKey="4">
                                <p>{data[4].projectName}</p>
                            </Accordion.Toggle>
                            <Accordion.Collapse eventKey="4">
                                <Card.Body>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[4].nickname)}>{data[4].projectName} Overall</p>
                                    </Link>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[4].subprojectNicknames[0])}>{data[4].subprojects[0]}</p>
                                    </Link>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[4].subprojectNicknames[1])}>{data[4].subprojects[1]}</p>
                                    </Link>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[4].subprojectNicknames[2])}>{data[4].subprojects[2]}</p>
                                    </Link>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[4].subprojectNicknames[3])}>{data[4].subprojects[3]}</p>
                                    </Link>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[4].subprojectNicknames[4])}>{data[4].subprojects[4]}</p>
                                    </Link>
                                    <Link to='/dashboard'>
                                        <p onClick={() => setProject(data[4].subprojectNicknames[5])}>{data[4].subprojects[5]}</p>
                                    </Link>
                                </Card.Body>
                            </Accordion.Collapse>
                        </Card>
                    </div>
                        : ''}
                </Accordion>
            </div>
        )
    }
}

export default Sidebar

Любая помощь приветствуется!