How to define onClick event in react properly? - html

Question

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 flexBox
document.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;
}

Answer 1

Code Sandbox: https://codesandbox.io/s/dazzling-bouman-62hgi?file=/src/App.js:0-1850
Here are 2 approaches to what you are trying to accomplish using react hooks:
The ProfilesOpn function uses a ref to set DOM properties.
The reactWayToShowCat function sets the showCat status using internal component state.
import React, { useState, useRef } from "react";
import "./styles.css";
export default function Explorer() {
const a = useRef(null);
const b = useRef(null);
const [showCat, toggleShowCat] = useState(true);
const ProfilesOpn = () => {
a.current.style.visibility = "hidden";
b.current.style.visibility = "visible";
};
const reactWayToShowCat = () => {
toggleShowCat(!showCat);
};
return (
<div className="Profiles">
{Array(4)
.fill("")
.map((_, i) => {
const num = i + 1;
return (
<div className={`Profile${num}`} key={num}>
<div className={`Profile${num}P`}></div>
<h3 className="ProfileH3">{`Profile${num}`}</h3>
</div>
);
})}
<h3 className="EndCoPro">Are you missing any profiles?</h3>
<button id="OpenProfiles" onClick={ProfilesOpn}>
<div className={"ProfilesOpen"} ref={a}>
<img src="https://placekitten.com/200/300" alt="Open Profiles" />
<p>
Click to see solution that uses refs to accomplish what you were
doing
</p>
</div>
</button>
<button id="CloseProfiles" onClick={reactWayToShowCat}>
<div className={"ProfilesClose"} ref={b}>
<>
{showCat && (
<img src="https://placekitten.com/200/300" alt="Close Profiles" />
)}
<p>
Click to see one react way to show and hide the cat (no styling)
</p>
</>
</div>
</button>
</div>
);
}
The main issue in original code was that onClick needs to be set with this syntax:
<button id="OpenProfiles" onClick={ProfilesOpn}>
Hope this helps!