Home Reactjs Reactjs dynamically added class to html elements

Reactjs dynamically added class to html elements

by therichpost
0 comment

Hello, welcome to therichpost.com. In this post, I will tell you, Reactjs dynamically added class to html elements. Reactjs is a Javascript Library to build user interface

In this post, I am adding className property  to li based on object value and this is very interesting and I am doing it first time.


I will add the class Name with the help of ternary operator and here is the working code and you need to add this into your index.js file:
import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component{
    //declare custom data array of object
    this.state = {
      {name:'lession1', completeed:true},{name:'lession2', completeed:false}
    return (
        //map array data
                                          //adding class name dynamically based in task completed value true or false
            return <li className={task.completeed ? 'green' : 'red'} key={task.name}>{task.name}</li>

ReactDOM.render(<Hello />, document.getElementById('root'));

 If you have any query related to this post then please do ask in below comment section and I will come with more post related to reactjs.

You may also like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.