ReactJs Add Multiple Classes To Element

We can add multiple classes to an element separated by space. Here in this tutorial, we are going to explain how to add multiple classes in an element. You can also use our online editor to edit and run the code online.

ReactJs Add Multiple Classes To Element Example

You can add multiple classes to element(component) simply as below-

<div id="root">
</div>
<script type="text/es2015">
function MyFunction() {
  var myClasses = 'class1 class2 class3';

  return (
   <div className={myClasses}>Hello World!</div>
  );
}

ReactDOM.render(
  <MyFunction />,
  document.getElementById('root')
);
</script>
 <style>
   .class1{color:red}
   .class2{background:yellow}
   .class3{padding:10px;}
  </style>

In the above all the three classes will be applied, on the same way you can add multiple classes as per your need.

Output of above example-

Add Comment

📖 Read More

• 1. ReactJs check empty Array or Object
• 2. ReactJS Reload Page
• 3. ReactJS check element exists in Array
• 4. React Pass Component As Prop with Props | ReactJs
• 5. ReactJs Round to two decimal places