Sunday, February 5, 2023

Reactjs dynamically added class to html elements

Reactjs dynamically added class to html elements


Hello, welcome to 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={}>{}</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.

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Angular 13, Angular 14, Angular 15, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

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