React: how return a string from arrow function and use it inside a ClassName

Question

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; }

Thales Kenne · Accepted Answer · 2021-11-29 18:20:29Z

3

You forgot to call your function. You're passing the function definition to the classname.

Just do

<div id="collapse1" className={openedClassName()}>

And it should work. Remember to use () to say that you want to run the function.

edited Nov 29, 2021 at 18:20

answered Nov 29, 2021 at 16:12

Thales Kenne

2,9921 gold badge16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Felix Kling Over a year ago

No need for a template literal: className={openedClassName()}

Thales Kenne Over a year ago

Thanks for pointing it out! Just copy pasted xD

Adarsh · Accepted Answer · 2021-11-29 16:14:53Z

1

solution: (forgot to call the function)

<div id="collapse1" className={`${openedClassName()}`}>

better solution

<div id="collapse1" className={`collapse ${isOpened ? 'show' : null}`}>

answered Nov 29, 2021 at 16:14

Adarsh

4485 silver badges16 bronze badges

Comments

David Salomon · Accepted Answer · 2021-11-29 16:17:06Z

0

I don't know if you consider it like dirty code, but I'd prefer to use:

<div id="collapse1" className={${isOpened && "collapse"}}></div>

If the state isOpened is true, it will add the collapse class, if it's not, it won't do anything

answered Nov 29, 2021 at 16:17

David Salomon

8492 gold badges10 silver badges26 bronze badges

Comments

bgcodes · Accepted Answer · 2021-11-29 16:21:34Z

0

After you created the function openedClassName, add following:

const myClassName = openedClassName();

Then in your jsx use it instead:

<div id="collapse1" className={`${myClassName}`}>

answered Nov 29, 2021 at 16:21

bgcodes

2882 silver badges13 bronze badges

Collectives™ on Stack Overflow

React: how return a string from arrow function and use it inside a ClassName

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related