how to hide and show a div in react

Question

hi i'm new to reactjs and i want to learn how to hide and show a div on button click. This is the view part i want to hide

<div className="comment_usr_details">
    <div>
        <img className="comment_usr_pic" src={profilePicture} alt=""/>
    </div>
    <div className="b">
        <p className="c">John Smith</p>
        <p className="d">1 minutes ago</p>
    </div>
    <img className="e" src={downarrow} alt=""/>
</div>

What have you tried? You've only posted a div here. To get you started, you're going to need an onclick handler, some form of state management, and some conditional rendering logic. — , Jan 24 '17 at 03:10
Possible duplicate of [Show/Hide components in ReactJS](http://stackoverflow.com/questions/29913387/show-hide-components-in-reactjs) — Andy Ray, Jan 24 '17 at 03:37

Chris · Accepted Answer · 2018-03-14T08:48:10.313

Typical way

The most common pattern to this is selectively rendering the element based on state.

class Foo extends React.Component {

    state = { showing: true };

    render() {
        const { showing } = this.state;
        return (
            <div>
                <button onClick={() => this.setState({ showing: !showing })}>toggle</button>
                { showing 
                    ? <div>This is visible</div>
                    : null
                }
            </div>  
        )
    }
}

Alternative

You can also use a style based on state. This is less common, but can be useful when you have complex components inside that div - one recent example, I had a complex non-React D3 graph within a toggle-able component, initially, I used the first method above, but caused quite a bit of lagging when flicking the div on/off because D3 was cycling up again.

Generally use the first approach though, unless you have a reason to use the alternative.

class Foo extends React.Component {

    state = { showing: true };

    render() {
        const { showing } = this.state;
        return (
            <div>
                <button onClick={() => this.setState({ showing: !showing })}>toggle</button>
                <div style={{ display: (showing ? 'block' : 'none') }}>This is visible</div>
            </div>  
        )
    }
}

Note

I use the ?: ternary operator instead of && - I'm a strong believer that the use of && is relying on a side effect of that operator to achieve a certain outcome. It works, don't get me wrong, but the ternary operator, in my opinion, is far more expressive and was designed to be a conditional.

This last bit is just my opinion - so I'm not questioning the use of &&.

I'm not sure I understand? Its a pretty basic snippet, it probably looks like a lot of react code — Chris, Jan 24 '17 at 23:05
what if you want to cycle through three divs instead of just one? — Mint, Aug 27 '20 at 14:34

score 9 · Answer 2 · answered Jan 24 '17 at 03:11

9

In React you just don't render that portion of the HTML. So make it part of a conditional:

{ this.props.display &&
  <div className="comment_usr_details">
    ...
  </div>
}

So if this.props.display is true the div shows and if it's false it doesn't.

answered Jan 24 '17 at 03:11

Juniper Jones

779
6
10

Charlie Martin · Answer 3 · 2017-01-24T03:32:51.707

class HideAndShowDivOnClick extends React.Component {

    state = {
        showDiv: true
    }

    render() {
        const { showDiv } = this.state
        return (
            <div>
                <button onClick={() => this.setState({ showDiv: !showDiv })}>
                    { showDiv ? 'hide' : 'show' }
                </button>
                { showDiv && (
                    <div id="the div you want to show and hide">Peek a boo</div>
                )}
            </div>  
        )
    }
}

how to hide and show a div in react

3 Answers3

Typical way

Alternative

Note

Linked