Material UI changing states onClick of the individual item from the ItemList

Question

Having an issue with selected props that comes from material UI. I'm trying to have a single item selected when clicked from my list, but right now when I click on any of items both of them go "selected".

Hope that's quite clear.

import React, { useState } from 'react';
import {
    ListItem,
    ListItemIcon,
    List,
} from '@material-ui/core';
import navLinks from 'components/navLinks';
import { Link } from 'react-router-dom';


const simpleList= () => {
    const [select, setSelect] = useState(false);

    const setActive = () => {
        setSelect(true);
    };

    return (
        <List>
            {navLinks.map((item) => (
                <div
                    key={item.id}
                >
                    <Link
                        className="simple-menu-link"
                        to={item.url}
                    >
                        <ListItem
                            button
                            key={item.id}
                            selected={select}
                            onClick={(e) => { setActive(e); }}
                        >
                            <ListItemIcon>
                                {item.icon}
                            </ListItemIcon>
                        </ListItem>
                    </Link>
                </div>
            ))}
        </List>
    );
};

export default simpleList;

Answer 1

In this case, each ListItem is reading from the select state. That way, if select is true, then all ListItem are selected. Same if it is false.

Since you need only one ListItem to be selected, you can instead store the index of that particular ListItem in the state.

Try something like this:

import React, { useState } from 'react';
import {
    ListItem,
    ListItemIcon,
    List,
} from '@material-ui/core';
import navLinks from 'components/navLinks';
import { Link } from 'react-router-dom';


const simpleList= () => {
    // setting initial index as null so that nothing is selected.
    // If you want first index to be selected, set initial state as 0
    const [selectedIndex, setSelectedIndex] = useState(null);

    const setActive = (index) => {
        setSelectedIndex(index);
    };

    return (
        <List>
            {navLinks.map((item, index) => (
                <div
                    key={item.id}
                >
                    <Link
                        className="simple-menu-link"
                        to={item.url}
                    >
                        <ListItem
                            button
                            key={item.id}
                            selected={index === selectedIndex}
                            onClick={() => { setActive(index); }}
                        >
                            <ListItemIcon>
                                {item.icon}
                            </ListItemIcon>
                        </ListItem>
                    </Link>
                </div>
            ))}
        </List>
    );
};

export default simpleList;