How to add a className to an element inside a variable in react?

Question

I want to add some classes to an element dynamically. I know how to do it with html-dom and how to do it with passing a JavaScript expression to className. But these are not what I want to do. I am wondering if there is a way to add it like pushing that class to an array or concatenating it to a string in that component object.

It is a pseudo-code of what I'm looking for:

const el = <div className='one' />;
// Notice that I'm not using useRef hook.
el.classList.push('two');

// OR:
el.className += ' two';

Nicholas Tower · Accepted Answer · 2022-01-30 14:26:15Z

6

Typically, you will do this by calculating the class name before you create the JSX element:

let className = "one";
className += " two";
const el = <div className={className} />

If that's not possible (say, you received this element as a prop from a parent, and so it has a classname of "one" already baked in), then you would need to use cloneElement:

import { cloneElement } from 'react';

const el = <div className='one' />;
const newElement = cloneElement(el, { className: el.props.className + " two "});

answered Jan 30, 2022 at 14:26

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

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

2 Comments

Navid Naseri Over a year ago

Isn't there a simpler way than cloneElement? If not, this is what I'm looking for.

Nicholas Tower Over a year ago

What you're doing is rarely needed. JSX elements are not really meant to be modified after they're created. Since it's rarely needed, they havn't made a simpler way to do it.

Eduardo.Daccio · Accepted Answer · 2022-01-30 14:31:25Z

0

You should try having one array variable with your different classes where you can push conditionally the classes your need and in your jsx split the array.

Like this:

const classNames = ['one']
classNames.push('two');

const el = <div className={classNames.split(' ')} />;

Your element isn't a node element where you have a classList property and you can add and remove classes. It is a JSX element. Even if it ressembles an html element in its structure.

edited Jan 30, 2022 at 14:31

answered Jan 30, 2022 at 14:24

Eduardo.Daccio

215 bronze badges

3 Comments

Navid Naseri Over a year ago

This is not what I'm looking for. I don't want to pass an expression to classList. element should be created before adding class.

Eduardo.Daccio Over a year ago

Your element isn't a node element where you have a classList property and you can add and remove classes. It is a JSX element. Even if it ressembles a html element in its structure.

Ricardo Over a year ago

I'd like to point out that arrays don't have a split method. In any case, since the className attribute takes a space-separated list of class names, did you by aby chance mean classNames.join(' ')?

Collectives™ on Stack Overflow

How to add a className to an element inside a variable in react?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related