CODEWITHSUNDEEP
reactjsmaterial-ui
Noel Yap
Noel Yap

Reputation: 19758

How to hide MUI React ListItem?

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?

Upvotes: 0

Views: 4199

Answers (2)

jrheling
jrheling

Reputation: 313

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.)

Upvotes: 0

YoannFleuryDev
YoannFleuryDev

Reputation: 941

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 :

Upvotes: 1

Related Questions