How to hide MUI React ListItem?

Question

I have the following:

<ListItem key={name} hidden={true} aria-hidden={true}>
  name
</ListItem>

but the ListItem is still showing up. How can it be hidden?

Answer 1

As far as I know, there is no hidden props on the ListItem component in Material-UI, so you will have to implement you own behavior to hide the ListItem :

• You can not render the concerned ListItem at all.
• You can render it but hide it using some CSS. See How to display and hide a div with CSS?.

Answer 2

I was looking to programmatically hide a Material-UI FormControl component, and found the same issue (i.e. the lack of a hidden prop).

What worked for me was to add a method that returned the appropriate class string, based on whether I wanted to show the component in question or not.

For example, with styles like:

const styles = createStyles({
    ...
    formcontrol: {
        minWidth: 120,
        margin: 10
    },
    invisible: {
        visibility: "hidden"
    },
});

I added this to my component class:

getStyle() {
    let cls: string;
    if (this.props.whatever) {
        cls = this.props.classes.formcontrol;
    } else {
        cls = this.props.classes.invisible + " " + this.props.classes.formcontrol;
    }
    return cls;
}

And then reference that from render() when creating the component I want to sometimes hide:

<FormControl className={this.getStyle()}>
...
</FormControl>

This should work for any styled MUI component.

(Side-note: the display prop appears from the docs to do this, but didn't work for me. Perhaps it works only for Box components, which happen to be what's used in all of the examples in the docs. This is worth further investigation which I have not yet spent the time to do.)