Highlight Selected Item on Menu -React

Question

I'm trying to highlight the selected item on the menu and I'm unable to do that. this is my code

import React, {Component} from 'react'
import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import ListItemText from '@material-ui/core/ListItemText'
import Collapse from '@material-ui/core/Collapse'
import ExpandLess from '@material-ui/icons/ExpandLess'
import ExpandMore from '@material-ui/icons/ExpandMore'
import Drawer from '@material-ui/core/Drawer'
import {withStyles} from '@material-ui/core/styles'
import {Link} from 'react-router-dom'
import menuItems from './menuItems'
import ListItemIcon from "@material-ui/core/ListItemIcon";

const classes = {
    root: {
        color: 'black',
        textAlign: 'left',
        textDecoration: 'none',
        //borderBottom: '1px solid',
        "&.Mui-selected": {
            background: 'linear-gradient(#45deg, #FE6B8B 30%, #FF8E53 90%)',
            borderRadius: 3,
            border: 0,
            color: "#505050",
            backgroundColor: 'red',
            height: 48,
            padding: '0 30px',
            boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
            textDecoration:'bold'
        },

        "&$selected:hover": {
            backgroundColor: "purple",
            color: "red",
            borderLeft: "2px solid white",
            textDecoration: 'none'
        },
        "&:hover":   {
            textDecoration: 'none',
            backgroundColor: "#505050",
            color: "white",
            borderLeft: "2px solid white",
        }
    },
    list: {
        // borderLeft: "2px solid #73AD21",
        position: 'fixed',
        top: 30,
        background: '#B5B4B6',
        align: 'left',
        width: 250,
        textDecoration: 'none'
    },

    links: {
        "&:hover": {
            backgroundColor: "green",
            color: "red",
             textDecoration: 'none'
        }
    }, 
    listItem: {
        color: 'black',
        paddingTop: '0px',
        paddingBottom: '0px',
        backgroundColor: 'red',
        textDecoration: 'none'
    },
    listSub: {
        color: 'red',
        textDecoration: 'none'
    },
};

class MenuBar extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    handleClick(item) {
        this.setState(prevState => (
            {[item]: !prevState[item]}
        ))

    }

    handler(children) {
        const {classes} = this.props
        const {state} = this
        const pd = menuItems.data.pad
       
        return children.map((subOption) => {
          
            if (!subOption.children) {
                return (
                    <div key={subOption.name}>
                        <Link
                            to={subOption.url}
                            className={classes.root}
                        >

                            <ListItem
                                button divider={true}
                                dense={true}
                                className={classes.root}
                                key={subOption.name}>
                                <ListItemIcon>
                                   <Myicon name={subOption.icn}/>
                                </ListItemIcon>
                                    <ListItemText
                                   // inset
                                    primary={subOption.name}
                                />

                            </ListItem> </Link>
                    </div>
                )
            }
            return (
                <div key={subOption.name}>
                    <ListItem
                        button
                        divider
                        dense
                        className={classes.root}
                        onClick={() => this.handleClick(subOption.name)}>
                      
                        <ListItemText
                            //inset
                            primary={subOption.name}/>
                        {state[subOption.name] ?
                            <ExpandLess/> :
                            <ExpandMore/>
                        }
                    </ListItem>
                    <Collapse style={{paddingLeft: 30, backgroundColor: 'white'}}
                              in={state[subOption.name]}
                              timeout="auto"
                              unmountOnExit
                    >
                        {this.handler(subOption.children)}
                    </Collapse>
                </div>
            )
        })
    }

    render() {
        const {classes, drawerOpen, menuOptions} = this.props
        return (
                <Drawer
                    variant="persistent"
                    anchor="left"
                    open
                    classes={{paper: classes.list}}
                >
                    <div >
                        <List
                          

                        >                                                         
                           
                          {this.handler(menuItems.data,selectedItem)}
                        </List>
                    </div>
                </Drawer>

        )
    }
}

export default withStyles(classes)(MenuBar)

using the above code and tried some changes but it won't work. I'm using React js. menut items are getting from JSON file created separately. I have created a state variable and tried to set selected in state and also tried to pass selected as prop both don't work for me.

Answer 1

Finally, I was able to fix the problem, and here is the solution

const styles = {
    root: {
        color: 'black',
        textAlign: 'left',
        textDecoration: 'none',
        //borderBottom: '1px solid',

        "&:hover":   {
            textDecoration: 'none',
            backgroundColor: "#505050",
            color: "white",
        //    borderLeft: "2px solid white",
        }
    },

    selected:{
        "&$selected, &.Mui-selected": {
           // background: 'linear-gradient(#45deg, #FE6B8B 30%, #FF8E53 90%)',
           // borderRadius: 3,
           // border: 0,
           // color: "#505050",
            borderBottom:'2px solid red',
           // backgroundColor: 'red',
          //  height: 48,
          //  padding: '0 30px',
         //   boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
          //  textDecoration:'bold'
        },

        "&$selected:hover": {
            backgroundColor: "#505050",
            color: "white",
          //  borderLeft: "2px solid white",
            textDecoration: 'none'
        },


    },

    list: {
        // borderLeft: "2px solid #73AD21",
        position: 'fixed',
        top: 30,
        background: '#B5B4B6',
        align: 'left',
        width: 250,
        textDecoration: 'none'
    },

    links: {
        "&:hover": {
            backgroundColor: "green",
            color: "red",
             textDecoration: 'none'
        }
    },

    listBtn: {
        paddingLeft: '0',
        background: '#B5B4B6',
        hoverColor: 'red',
        hoverBackgroundColor: 'red',
        textDecoration: 'none'
    },

    menuHeader: {
        color: 'white',
        // background: 'linear-gradient(#B5B4B6, #B5B5B8 50%, #FF8E53 90%)',
        // boxShadow: '0 3px 5px 0px rgba(255, 200, 135, .8)',
        borderBottom:'2px solid gray',
        textDecoration: 'none'
    },

    listItem: {
        color: 'black',
        paddingTop: '0px',
        paddingBottom: '0px',
        backgroundColor: 'red',
        textDecoration: 'none'
    },

    listSub: {
        color: 'red',
        textDecoration: 'none'
    },
};

I have changed the status of this and updated the selected status on handle click()

 constructor(props) {
        super(props);
        this.state = {
            selected: ""
        };
    }

    handleClick(item) {
        this.setState((prevState) => ({
            [item]: !prevState[item],
            selected: item // Update the selected state
        }));
    }

In return, I have conditionally applied style according to the selected status

 return (
                <div key={subOption.name}>
                    <Link to={subOption.url} className={`${classes.root} ${selected === subOption.name ? classes.selected : ''}`}>
                    <ListItem
                        button
                        divider
                        dense
                        className={`${classes.root} ${selected === subOption.name ? classes.selected : ''}`}
                        onClick={() => this.handleClick(subOption.name)}
                    >
                        <ListItemIcon>
                            <Myicon name={subOption.icn} />
                        </ListItemIcon>
                        <ListItemText primary={subOption.name} />
                        {subOption.children && (this.state[subOption.name] ? <ExpandLess /> : <ExpandMore />)}
                    </ListItem>
                    </Link>
                    {subOption.children && (
                        <Collapse
                            style={{ paddingLeft: 30, backgroundColor: 'white' }}
                            in={this.state[subOption.name]}
                            timeout="auto"
                            unmountOnExit
                        >
                            {this.handler(subOption.children)}
                        </Collapse>
                    )}
                </div>
            );

Changed export as

export default withStyles(styles)(MenuBar);

I hope this will help