score:1

Accepted answer

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

score: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.


Related Query

More Query from same tag