I tried to set an onClick event to open a flexbox in react using tsx. The button and the flexbox is shown properly but vscode shows a problem with the onClick event. I cant figure out whats wrong but maybe you can. I am new to the field and tried some ideas from the stack community but it didnt work for me.
The console tells me I have to assign 'string' but it doesnt work either.
//Function to change visibility of the flexBoxdocument.getElementById("OpenProfiles") .addEventListener("click", ProfilesOpn);function ProfilesOpn () { var a = document.querySelectorAll(".ProfilesOpen")[0]; var b = document.querySelectorAll(".ProfilesClose")[0]; a.style.visibility = "hidden" b.style.visibility = "visible";}//the button code inside the flexbox <div className={"Profiles"}><div className={"Profile1"}><div className={"Profile1P"}></div><h3 className={"ProfileH3"}>Profile1</h3> </div><div className={"Profile2"}><div className={"Profile2P"}></div><h3 className={"ProfileH3"}>Profile2</h3> </div><div className={"Profile3"}><div className={"Profile3P"}></div><h3 className={"ProfileH3"}>Profile3</h3> </div><div className={"Profile4"}><div className={"Profile4P"}></div><h3 className={"ProfileH3"}>Profile4</h3> </div><h3 className={"EndCoPro"}>Are you missing any profiles?</h3><button id="OpenProfiles" onClick="return(ProfilesOpn());"><div className={"ProfilesOpen"}><img src={ProfilesOpen} alt="Open Profiles"/></div></button></div>//the code in sass for the styling .Profiles { position: absolute; display: flex; left: 0px; bottom: 0px; width: 300px; height: 900px; flex-direction: column; justify-content: flex-start; align-items: space-between; background-color: #292929; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2); border-top-right-radius: 25px; border-bottom-right-radius: 25px; visibility: hidden;}