How to dynamically add a class to manual class names?

by

You can either do this, normal JavaScript:

className={'wrapper searchDiv ' + this.state.something}

or the string template version, with backticks:

className={`wrapper searchDiv ${this.state.something}`}

Both types are of course just JavaScript, but the first pattern is the traditional kind.

Anyway, in JSX, anything enclosed in curly brackets is executed as JavaScript, so you can basically do whatever you want there. But combining JSX strings and curly brackets is a no-go for attributes.

More Related Contents:

  1. Working with CSS in React [closed]
  2. React.js inline style best practices [closed]
  3. How to make React CSS import component-scoped?
  4. How to use template literals in tailwindcss to change classes dynamically?
  5. Next.js Global CSS cannot be imported from files other than your Custom
  6. Change outline for OutlinedInput with React material-ui
  7. How to override global CSS in a CSS module file?
  8. React native text going off my screen, refusing to wrap. What to do?
  9. How to add fonts to create-react-app based projects?
  10. How do I apply vendor prefixes to inline styles in reactjs?
  11. How to get a react component’s size (height/width) before render?
  12. How to apply custom animation effect @keyframes in MUI?
  13. How to use images in css with Webpack
  14. ml-auto is not pushing navbar links to the right
  15. How to combine and use multiple Next.js plugins
  16. CSS Floating Divs At Variable Heights [duplicate]
  17. Sass Variable in CSS calc() function
  18. Can I remove the URL from my print css, so the web address doesn’t print?
  19. Custom Cursor Image CSS
  20. Webkit CSS Animation issue – persisting the end state of the animation? [duplicate]
  21. Maintain aspect ratio according to width and height
  22. Make child visible outside an overflow:hidden parent
  23. How to align left last row/line in multiple line flexbox [duplicate]
  24. What are the differences between flex-grow and width?
  25. How to vertically center an image inside of a div element in HTML using CSS?
  26. Changing JSF prefix to suffix mapping forces me to reapply the mapping on CSS background images
  27. How to reset / remove chrome’s input highlighting / focus border? [duplicate]
  28. Using “word-wrap: break-word” within a table [duplicate]
  29. Why adds extra top margin?
  30. Center fixed div with dynamic width (CSS)

Leave a Comment