How come the changes in my react component's CSS are not updating in real-time?

Question

How come the changes in my react component's CSS are not updating in real-time?

After integrating redux into my create-react-app project, I've been struggling to implement a navigator that highlights the active "page link." To achieve this functionality, I am using a combination of react hooks (to maintain the current page state) and the npm package called classNames.

The code snippet I'm utilizing for this purpose is:

classNames(object['key'] && classes.activeItem)

In this setup, when object['key'] evaluates to true for a specific item activation, the corresponding element receives the activeItem class.

Interestingly, when I replace object['key'] with simply true, it functions as expected. Additionally, upon clicking the item, logging the value of object['key'] also returns true.

However, despite these observations, the mechanism seems to be malfunctioning. Any insights on why this might be happening would be greatly appreciated!

import React, { useEffect, memo } from 'react';
import { bindActionCreators, compose } from 'redux';
import { connect } from 'react-redux';
...

css reactjs webpack sass material-ui

Answer 1

Answer №1

Remember that the function passed to the useEffect hook always runs after rendering.

Your useEffect does not trigger a re-render for the component to reflect changes. Only changes to state can cause a re-render. If you want a re-render, you should first use the useState hook to update the state and then call setState within the useEffect hook. Alternatively, you could include these actions directly in the render cycle (outside of the useEffect hook):

activePage = _.mapValues(activePage, () => false);
activePage[curPage] = true
useEffect(() => {
    if(!curPage){
      onPageChange('search');
    }
});

Upon reviewing your code, it appears you can simplify by using

curPage === 'invite' && classes.itemActiveItem

instead of

activePage['invite'] && classes.itemActiveItem

, removing the unnecessary lines related to the activePage object. This will streamline things for you.

Answer 2

Remember that the function passed to the useEffect hook always runs after rendering.

Your useEffect does not trigger a re-render for the component to reflect changes. Only changes to state can cause a re-render. If you want a re-render, you should first use the useState hook to update the state and then call setState within the useEffect hook. Alternatively, you could include these actions directly in the render cycle (outside of the useEffect hook):

activePage = _.mapValues(activePage, () => false);
activePage[curPage] = true
useEffect(() => {
    if(!curPage){
      onPageChange('search');
    }
});

Upon reviewing your code, it appears you can simplify by using

curPage === 'invite' && classes.itemActiveItem

instead of

activePage['invite'] && classes.itemActiveItem

, removing the unnecessary lines related to the activePage object. This will streamline things for you.

How come the changes in my react component's CSS are not updating in real-time?

Answer №1

Similar questions

What is preventing HTML from triggering JavaScript when loaded inside a <div> with a script?

Issues with displaying or hiding a DIV using javascript - popup box unresponsive

When integrating Material-UI with REDUX, I am experiencing difficulties in retrieving the most recent value from the global state

Strange outcomes observed with CSS Selector nth-child

Issue encountered while trying to modify the color of a placeholder

Exploring the process of updating the background color of a specific component in Angular

Detecting a mobile device when using NextJS can be accomplished by using user

I find it confusing how certain styles are applied, while others are not

Is the child constantly updating due to a function call?

The size of HTML select input varies among IOS, Android, and Windows devices

Build a Docker container for a project that requires utilizing yarn link for dependencies

Replacing the CSS Reset with the Universal Selector

Tips for updating mysql records on a web page without the need to refresh it using PHP

Navigating through various Headers in ReactjsHandling different Headers in Reactjs

Switching from vertical pills to horizontal tabs for smaller screens

Design the header and body of the table in a visually appealing format

Implementing pagination in ReactTable by making an API call when the next button is clicked

Having trouble with assigning an error message in Formik validation using TypeScript

Text transitions in a gentle fade effect, appearing and disappearing with each change

Using an array of objects with useState