const slides = [
    [string1, string2, stringi],
    [string1, string2, stringi],
    [string1, string2, stringi],
    [string1, string2, stringi],
];

const changeSlide = (num) => {
    const discipline = document.querySelector("#changeSlide-"+num)
    discipline.classList.toggle("hidden")
}

    return (
            <div className="flex flex-col w-1/2 h-60 px-12 py-4 items-center shadow-lg rounded-xl ring-1 ring-black/5">
                <h1 className="pb-2">
                    Technical Skills
                </h1>
                <ul className="flex space-x-2 border-b-2 mb-2">
                    <li>
                        <a href="" className="p-2 inline-block rounded-t-lg hover:bg-gray-200"
                            onClick={() => changeSlide(0)}>Software</a>
                    </li>
                    <li>
                        <a href="" className="p-2 inline-block rounded-t-lg hover:bg-gray-200"
                            onClick={() => changeSlide(1)}>Firmware</a>
                    </li>
                    <li>
                        <a href="" className="p-2 inline-block rounded-t-lg hover:bg-gray-200"
                            onClick={() => changeSlide(2)}>Mechanical</a>
                    </li>
                    <li>
                        <a href="" className="p-2 inline-block rounded-t-lg hover:bg-gray-200"
                            onClick={() => changeSlide(3)}>DevOps</a>
                    </li>
                </ul>
                {slides.map(function(slide, idx) {
                    return <div className="hidden"
                                id={"changeSlide-"+idx}
                                key={idx}>
                                    {slide.map(function(line, jdx) {
                                        return <p key={jdx}>{line}</p>
                                        })
                                    }
                            </div>
                        })
                    }
        </div>
    )
}

this is what this renders for me
我想让这个react组件在相应的菜单按钮被单击时返回slides数组中的字符串。它确实是这样做的。问题是页面似乎在内容显示后再次呈现。我说可能是因为据我所知它可能是在重新运行map函数或其他东西。
我需要1）找出在changeSlide（idx）被调用onClick之后发生了什么以及为什么发生，以及2）应该做什么。
我不确定上面的代码是否会运行，因为我删除了很多我实际使用的东西。我认为一个更简单的视图会有所帮助。让我知道，我会重新发布工作代码，但这应该是最好的说明问题。谢谢。