I have a Component:

import { useState } from "react";

export const Sidebar = () => {

    const [isOpened, setIsOpened] = useState(false);

    const handleClick = () => {
        setIsOpened(!isOpened);
    }

    const openedClassName = () => {
        let classNameString = "collapse";
        if (isOpened) {
            classNameString = classNameString + " show";
        }
        return classNameString;
    }

    return (

        <ul className="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
            
            <li className="nav-item active">
                <a className="nav-link" href="#" onClick={handleClick}>
                    <i className="fas fa-fw fa-folder"></i>
                    <span>Pages</span>
                </a>
                <div id="collapse1" className={`${openedClassName}`}>
                    <div className="bg-white py-2 collapse-inner rounded">
                        <a className="collapse-item" href="login.html">Login</a>
                    </div>
                </div>
            </li>
            <div className="text-center d-none d-md-inline">
                <button className="rounded-circle border-0" id="sidebarToggle"></button>
            </div>

        </ul>
    );
}

export default Sidebar;

I want to produce the className on the collapse1 BEFORE the rendering, so I added the openedClassName function.

But I have inside my class the entire arrow function, not the string...

this is test result:

Expected the element to have class:
      show
    Received:
      () => { let classNameString = "collapse"; if (isOpened) { classNameString = classNameString + " show"; } return classNameString; }