score:1
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.
Source: stackoverflow.com
Related Query
- How to add a className to an element inside a variable in react?
- How to add additional props to a React element passed in as a prop?
- How to pass a state className variable to another component in react
- How to add style to React Element if it's created this way?
- How to add a comma in array.map after every element except last element in React JSX
- How to add class in element on scroll React js
- How to append element to variable to be render in react
- How to provide dynamic className to element in React Class render method
- In React how to add key prop to element passed as Object
- How to add a button inside a cell in the DevExtreme React Grid?
- How do I add a custom font to my Card Element when using React Stripe Elements?
- How can I combine a React element and text inside a ternary?
- How to conditionally add attributes to react DOM element
- React: How to add onChange functionality inside of Function component using React Hooks? Need onClick event from a checkbox to influence input state
- React JS - How to add object inside object
- How to add dynamic code inside of a React Router Link component
- How to add a CSS class to an element on click - React
- How to use an ejs variable inside a react render function?
- React Hooks - How to target an element child (with useRef) with a variable declaration outside of useEffect?
- How to add a html element next to the cursor in contentEditable div. React Js
- How to add animate to the alphabets inside a react carousal?
- How to increment a variable inside .map() in react js
- How to remove an element from an array that is inside an object in React JS (ES6)
- How to add a dynamic Element to particular Html Node which is extracted from React ref?
- REACT JS: How to add a Key to an array that hasn't been initiated, inside a map?
- How do I correctly add data from multiple endpoints called inside useEffect to the state object using React Hooks and Context API?
- How to add the input field inside the select option using ant design and react
- How to add a each element of an array into React state
- How to add a CSS class to an element with React function components
- How can I add html Element Attributes in react
More Query from same tag
- React router redirect outside of route component
- Convert pdf to image before uploading it to s3
- Await async firebase foreach?
- React Native can console log state variable, but can't render it
- Material-UI: AppBar => FlatButton Text unstyled if not defined directly
- Buttons invisibles on react native
- React router dont render component then he have parameter
- Component did update works only after second click
- Force ReactJS to throw real errors when propTypes validation fails?
- Development build crashes when using React.lazy()
- Why Redux doesn't re-render component?
- ReactJS/Semantic-UI print error on table row
- React JS variable and text field not updating
- Can’t dynamically setState in React/Typescript
- New page same as home page react
- How to avoid the error "Unknown prop <> on tag. Remove this prop from the element"?
- Nodebuffer is not supported by this platform
- implement useFetch react hook to work inside submit function
- How to use array state in React function component?
- React-bootstrap Popover: Not positioned where I expect it
- TypeError: Cannot read property 'map' of undefined react component
- How create separate component for prev/next buttons ReactJS
- Material UI Autocomplete Render Option
- Dynamic onClick and render in ReactJS
- How to make the background color of CSS cover entire browser window?
- How to make sidebar close when any link is clicked?
- Push Reactjs app to Heroku giving fsevents error
- How to setState in store redux after createAsyncThunk fullfilled?
- React router V4 with inner views
- Return two li objects under the same container