React is failing to display various class attributes from variables

I've been attempting to customize my React component, but I'm experiencing some strange behavior that I can't quite wrap my head around.

<div className={classNames(scss[isOdd ? 'timeline-item-icon-odd' 
: 'timeline-item-icon-even'], [inProgress])}>

When I check the DOM, it shows:

timeline-item-icon-odd___3K5am progress

Where "progress" comes from the variable "inProgress."

  • Initially, I thought this was the correct way to go about it, but it seems to only apply the first class and completely ignore the second one.

  • I even set up a simple HTML and CSS file to test my styles before applying them, and everything worked as expected there.

CSS:

.timeline-item-icon-odd {
      background-color: gray;
      border-color: gray;
}

.progress {
      background-color: green !important;
      border-color: green !important;
}

Ultimately, my goal is to have the background color adjust according to the "inProgress" variable.

If anyone has any insights or ideas, I would greatly appreciate it.
Thank you in advance!
Best Regards

cssreactjsvariablesdom

Answer №1

To include the class "inProgress" along with your other conditional CSS classes, simply add inProgress to your code like this:

<div className={classNames(scss[isOdd ? 'timeline-item-icon-odd' 
          : 'timeline-item-icon-even',inProgress])}>

By following this method, you should be able to resolve the issue. I have personally tested it and it worked successfully.

Answer №2

The Resolution:

 <div className={classNames(
            scss[isOdd ? 'timeline-item-icon-odd' : 'timeline-item-icon-even'],
            scss[inProgress]
          )}
          >

The resolution involved placing the scss at the beginning, correcting a syntax error.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Concealing and Revealing a Div Element in HTML

Every time the page is refreshed, I am encountering a strange issue where I need to double click a button in order to hide a block. Below is the code snippet for reference: <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

javascripthtmlcss

Can we expect every bullet point to be consistently indented at precisely 1.8em?

Recently, I created a dropdown menu using only CSS. The challenge was to have a horizontal bar of items that can each expand into a vertical menu. However, I wanted the expanded menus to display bulleted lists instead of tertiary menus. By nesting three ul ...

cssbrowserfontscross-browserhtml-rendering

Facing a react-native-camera issue during android compilation

After attempting to update my react native project to the latest version (0.59.2), I encountered an issue when trying to execute react-native run-android with this error: Could not establish the dependencies of task ':app:preDebugBuild'. > Co ...

reactjsreact-nativereact-native-camera

Guide to making a rating bar or linear gauge with Material UI in React

I'm fairly new to React and I have a project where I need to create a custom rating bar that looks like this: https://i.stack.imgur.com/UB4SA.png I've been exploring material UI for components, but couldn't find one that matches my requirem ...

reactjsmaterial-ui

What are the benefits of storing variables as attributes of another variable?

Lately, I have adopted a new method of storing variables (such as X_train, y_train, X_test, y_test) as attributes of their full dataframes. This approach has proven beneficial in keeping my different training and testing datasets organized, especially when ...

pythonpandasdataframevariablesstorage

Tips on implementing the onChange event in a custom text input for React Native applications

Recently, I started exploring React Native and attempted to create a custom text input with suggestions following a tutorial. However, I encountered an issue where I couldn't use onChange on my custom text input. I attempted to set up a state in App.j ...

javascriptreactjsreact-native

Dealing with onChange value in a date in reactjs is a common challenge that developers

I'm currently working on a basic date input component in React, but I've run into an issue when trying to change the value. Every time I update it, it always displays "1970-01-01". If anyone has any suggestions on how to fix this problem, I woul ...

javascriptreactjs

Using Redux Thunk to redirect upon success or error - a step-by-step guide

I am new to using Promises and React. Currently, I am utilizing redux-thunk within my action creators to handle promises and then calling these action creators from my component. My question is, how can I redirect to a different URL upon successful or unsu ...

reactjsreduxreact-reduxredux-thunk

What is the best way to set up a React route for this specific situation?

I am in need of guidance regarding my routes setup. I want to create an Application route with the following requirements: Any user trying to access an invalid route should be redirected to the /add-user page. Users should be able to directly access the c ...

javascripthtmlreactjsreact-routerreact-router-dom

The Material-ui Drawer element is failing to display its internal items

In my current project, I am building a practice e-commerce application utilizing React.js, @material-ui/core/Drawer, and Redux. I've encountered an issue where manually rendering items to the Drawer works fine, but utilizing a handleAddToCart function ...

javascriptarraysreactjsreduxmaterial-ui

Implementing color transitions in javascript

Everyone talks about transitioning things in CSS, but have you ever thought about transitioning background colors in JavaScript? I'm currently working on a function that changes the background color of a div with the id of ex1 to green. However, I&apo ...

javascripthtmlcss

Tips for dynamically rendering a React component from an object

Looking to include an imported component with some props in my React code. Unable to find a solution on Stack Overflow for this specific format. Can someone provide guidance on how to achieve this? Thanks in advance. import { HomeIcon } from "../lib/i ...

javascriptreactjstypescriptnext.jsjsx

Modify the default background color for the chosen element in the tree structure

Could someone assist me in changing the default background color of a selected element in the tree? Below is the XHTML code: <style type="text/css"> .ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state- ...

cssprimefaces

Tips for ensuring an animation is triggered only after Angular has fully initialized

Within this demonstration, the use of the dashOffset property initiates the animation for the dash-offset. For instance, upon entering a new percentage in the input field, the animation is activated. The code responsible for updating the dashOffset state ...

javascriptcssangulartypescriptangular-animations

Tips for creating a horizontal bar with CSS using the float property

Looking to create a horizontal scroll layout using CSS and floats? Here's my attempt, but I'm not getting the desired result. Flexbox isn't an option as it needs to be supported on IE. Take a look at my code and point out where I might have ...

htmlcss

Can hiding a tracking pixel with CSS effectively render it ineffective in tracking user behavior?

In an effort to conceal tracking pixels while maintaining their purpose, I have decided to implement a method inspired by the insights shared in a Snook Research post. It is crucial that these tracking elements remain functional without causing any uninten ...

css

how to style a page with a CSS arrow shape

Can someone help me figure out how to create an arrow similar to the one in this button using CSS? https://i.sstatic.net/gQi0l.png I've been able to create triangle-like arrows like the one below #triangle_arrow { top: 3pt; content: ...

csscss-shapes

Issue: App is not being styled with Material UI Theme Colors

I'm having trouble changing the primary and secondary colors of Material UI. Even after setting the colors in the theme, the controls like Buttons or Fabs still use the default colors. Can someone help me figure out what I'm missing? index.js /* ...

javascriptreactjsmaterial-ui

Utilizing TypeScript for messaging in React Native and React

I have encountered a specific issue with my React projects. When using npx without Typescript, I receive error messages as shown in the following screenshots: https://i.sstatic.net/g68ho.png https://i.sstatic.net/Kmye5.png Interestingly, in my React Nat ...

reactjstypescriptreact-native

Is there a way to enable scrolling in the background when a modal is open?

I recently designed a bootstrap modal, but I encountered an issue where when it appears, the vertical scrollbar on the background page becomes disabled and the content shifts to the right by the width of the scrollbar. I want to prevent this content shif ...

htmlcsstwitter-bootstraptwitter-bootstrap-3