function DownloadCompoent()

in src/components/DownloadCompoent.tsx [265:336]
68 lines of code
5 McCabe index (conditional complexity)

function DownloadCompoent() {
    const defaultShowItemArray = Array(data.length).fill(false);
    const [showItem, setShowItem] = useState(defaultShowItemArray);

    const closeList = useCallback((e) => {
        const { target } = e;
        const value = target.getAttributeNode('id')?.value;
        if (value && value === 'dropDownButton') {
            return
        } else {
            setShowItem(defaultShowItemArray);
        }
    }, [])

    useEffect(() => {
        document.addEventListener('click', (e) => { closeList(e) });
        return document.removeEventListener('click', (e) => { closeList(e) });
    }, []);

    const showList = useCallback(index => {
        const newShowItem = showItem.map((item, key) => {
            if (key === index) {
                return !item;
            } else {
                return false;
            }
        })
        setShowItem([...newShowItem]);
    }, [showItem]);

    return (
        <div className={styles.downloadContainer}>
            {data.map((item, index) => {
                const { versions, title } = item;
                return (
                    <div className={styles.downloadCard} key={index}>
                        <div className={styles.downloadCardTitle}>{title}</div>
                        <button id='dropDownButton' className={styles.downloadCardButton} onClick={() => { showList(index) }}><Translate>All Versions</Translate></button>
                        {
                            showItem[index] &&
                            (
                                <div className={styles.dropDownContainer}>
                                    {
                                        versions.map((item2, index2) => {
                                            const { versionTitle, targets } = item2;
                                            const listArr = Object.keys(targets).map(list => {
                                                return {
                                                    title: list,
                                                    link: targets[list],
                                                }
                                            })
                                            return (
                                                <div key={index2}>
                                                    <div className={styles.versionTitle}>{versionTitle}</div>
                                                    <div className={styles.downloadLinks}>
                                                        {listArr.map((url, index3) => {
                                                            const title = '[' + url.title + ']'
                                                            return (
                                                                <a href={url.link} key={index3}>{title}</a>
                                                            )
                                                        })}
                                                    </div>
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            )
                        }
                    </div>
                )
            })}