Why isn't my react component's css updating dynamically? - css

Question

I added redux to create-react-app and i've been trying to get a navigator to work. I do this by having the active "page link" highlighted. The code I use for this is a combination of react hooks (using state to remember current page) and the npm package classNames.
classNames(object['key'] && classes.activeItem)
So here I have object['key'] evaluate to true when that particular item is activated so that the item gains the activeItem class.
When I replace object['key'] with true, it works. When I console.log object['key'] after I click it, it also evaluates to true.
Why isn't this working? Thanks!
import React, { useEffect, memo } from 'react';
import { bindActionCreators, compose } from 'redux';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from '#material-ui/core/styles';
import { loadPage } from './actions';
import { uploadFile } from '../uploadFile/actions';
import _ from 'lodash';
const styles = theme => ({
item: {
paddingTop: 4,
paddingBottom: 4,
color: 'rgba(255, 255, 255, 0.7)',
'&:hover': {
backgroundColor: 'rgba(255, 255, 255, 0.08)',
},
},
itemPrimary: {
color: 'inherit',
fontSize: theme.typography.fontSize,
'&$textDense': {
fontSize: theme.typography.fontSize,
},
},
itemActiveItem: {
color: '#4fc3f7',
},
textDense: {}
});
function Navigator(props) {
const { classes, curPage, onUploadFile, onPageChange, dispatch, ...other } = props;
let activePage = {
'invite': false,
}
useEffect(() => {
if(!curPage){
onPageChange('search');
}
activePage = _.mapValues(activePage, () => false);
activePage[curPage] = true
});
return (
<Drawer variant="permanent" {...other}>
<List disablePadding>
<ListItem button className={classNames(classes.logo)}>
<img src={require("assets/img/logo.png")} alt={''}/>
</ListItem>
<ListItem className={classes.categoryHeader} >
<ListItemText classes={{ primary: classes.categoryHeaderPrimary }}>
Files
</ListItemText>
</ListItem>
<ListItem
button
dense
className={classNames(classes.item, activePage['invite'] && classes.itemActiveItem)}
onClick={() => {onPageChange('invite')}}
>
<ListItemIcon><PeopleIcon /></ListItemIcon>
<ListItemText classes={{ primary: classes.itemPrimary, textDense: classes.textDense }}>
Invite To Your Team
</ListItemText>
</ListItem>
</List>
</Drawer>
);
}
Navigator.propTypes = {
classes: PropTypes.object.isRequired,
onPageChange: PropTypes.func.isRequired,
onUploadFile: PropTypes.func.isRequired
};
const mapStateToProps = (state) => {
const { curPage } = state.app;
return { curPage };
};
const mapDispatchToProps = (dispatch) => {
return {
onPageChange: bindActionCreators(loadPage, dispatch),
onUploadFile: bindActionCreators(uploadFile, dispatch),
dispatch
};
};
const withConnect = connect(
mapStateToProps,
mapDispatchToProps
);
export default compose(withConnect, memo, withStyles(styles))(Navigator);

Answer 1

Note that function passed to the useEffect hook is always run after the render.
Your useEffect doesn't cause a re-render for component to see the changes. Only change to state causes a re-render. If you want a re-render, you need to use useState hook first, and then you need to setState from within the useEffect hook. Or, you could just run these two lines as part of a render (removing them from the useEffect hook, putting them outside):
activePage = _.mapValues(activePage, () => false);
activePage[curPage] = true
useEffect(() => {
if(!curPage){
onPageChange('search');
}
});
But as I'm looking at your code, I think you could just use curPage === 'invite' && classes.itemActiveItem instead of activePage['invite'] && classes.itemActiveItem and remove those unnecessary lines related to activePage object. It would make things much easier.