CODEWITHSUNDEEP
javascriptcssreactjs
Leo Messi
Leo Messi

Reputation: 6186

Check if an element contains a css class in React

There are multiple tabs like this:

 <Menu.Item className="tab-title tab-multiple" key="key">
     <p className="tab-title-text">
         Tab title
        <span className="items-counter">{showText}</span>
      </p>
 </Menu.Item>

the one that is the active/selected one, beside of its original class (tab-title tab-multiple) it also has active and its class looks like this: active tab-title tab-multiple

I want to show that element only if the class contains "active".

Is there a way to do this in React? Without taking in account onClick.

Tried with a ternary but it seems it does not work:

{element.classList.contains('active') ? (
  <span className="items-counter">{showText}</span>
 ) : (<></>)}

Upvotes: 2

Views: 8866

Answers (3)

Vijay122
Vijay122

Reputation: 964

You need to have an indicator, that maintains the active class.

let className ="";
if(isActive)
   {
      className = className +" active"; // props.isActive in case of child component
   }

Now that you have added the className based on the flag. instead of checking for,

if(element.classList.contains('active'))

you can check for,

if(isActive)

This is applicable for subcomponents also, where you read the isActive flag through props.

Upvotes: 0

Ori Drori
Ori Drori

Reputation: 193027

React is driven by the data model (props & state). Use whatever data property you use to assign the active class name, to also hide/show the contents.

Another option is to use CSS:

.items-counter {
  color: red;
}

.tab-title:not(.active) .items-counter {
  display: none;  
}
<div class="tab-title tab-multiple" key="key">
  <p class="tab-title-text">
    Tab title
    <span class="items-counter">Not Active</span>
  </p>
</div>

<div class="tab-title tab-multiple active" key="key">
  <p class="tab-title-text">
    Tab title
    <span class="items-counter">Active</span>
  </p>
</div>

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075537

Normally, you don't have to do that in React because you drive the classes on the element from state information in your component, and so you just look at that state information rather than looking at the class list. Your best bet by far is to do that, rather than accessing the DOM class list later.

If the active class is being added by something outside the React realm that's operating directly on the DOM element, you'll have to use a ref so you can access the DOM element.

To create the ref:

const ref = React.createRef();

To connect it to your React element, you add the ref property;

<Menu.Item className="tab-title tab-multiple" key="key" ref={ref}>

Then when you need to know, you check the current property on the ref:

if (ref.current && ref.current.classList.contains("active")) {
    // ...
}

Beware that if you do that during a call to render (on a class component) or to your functional component's function, on the first call the ref will be null and on subsequent calls it'll always refer to the element for the previous version of the component. That element will probably get reused, but not necessarily.

Upvotes: 3

Related Questions