How to define onClick event in react properly?

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!