show/hide a specific <div> in react

Question

beginner in React and javascript, i'm stuck to this problem:

How can i show/hide a specific div when i click to his dedicated shutter button?

here is the idea i came with but as you may see , when i click an "open" or " close " link, it justs affect every div.

import React from 'react'

class Qui extends React.Component {

    constructor(props) {
      super(props);
      this.state = { isToggleOn: true };
      this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
      this.setState(prevState => ({
        isToggleOn: !prevState.isToggleOn
      }));
    }

    render() {
      return(
        <div>

          <h1>first part</h1>
          <a onClick={this.handleClick> 
            {this.state.isToggleOn ? 'open' : 'close'}
          </a>
          <div className={this.state.isToggleOn ? 'hidden':'visible'}>
            <p> blablabla blablabla </p>
            <p> blablabla blablabla </p>
            <p> blablabla blablabla </p>
          </div>

          <h1>second part</h1>
          <a onClick={this.handleClick> 
            {this.state.isToggleOn ? 'open' : 'close'}
          </a>
          <div className={this.state.isToggleOn ? 'hidden':'visible'}>
            <p> onetwothree onetwothree </p>
            <p> onetwothree onetwothree </p>
            <p> onetwothree onetwothree </p>
          </div>

        </div>
      )
    }
  }

Thanks for helping me :) .

Jackyef · Accepted Answer · 2018-08-11 14:23:40Z

1

You can set the activeDivIndex in the state, and then show the div based on the activeDivIndex value.

  state = {
    activeDivIndex: 0
  };

  handleClick = index => {
    this.setState({ activeDivIndex: index });
  };

  render() {
    return (
      <div>
        <h1>first part</h1>
        <a onClick={() => this.handleClick(0)}>
          {this.state.activeDivIndex === 0 ? "open" : "close"}
        </a>
        {this.state.activeDivIndex === 0 && (
          <div>
            <p> blablabla blablabla </p>
            <p> blablabla blablabla </p>
            <p> blablabla blablabla </p>
          </div>
        )}
        <h1>second part</h1>
        <a onClick={() => this.handleClick(1)}>
          {this.state.activeDivIndex === 1 ? "open" : "close"}
        </a>
        {this.state.activeDivIndex === 1 && (
          <div>
            <p> onetwothree onetwothree </p>
            <p> onetwothree onetwothree </p>
            <p> onetwothree onetwothree </p>
          </div>
        )}
      </div>
    );
  }

You can check it live in codesandbox here.

edited Aug 11, 2018 at 14:23

answered Aug 11, 2018 at 14:18

Jackyef

5,0421 gold badge21 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kikiklang Over a year ago

hi thanks for your solution. not working as expected but still good to know

Tholle · Accepted Answer · 2018-08-11 14:28:35Z

You could have a separate state variable for every div and use that to show/hide them separately.

Example

class Qui extends React.Component {
  state = {
    showFirstPart: true,
    showSecondPart: true
  };

  toggleFirstPart = () => {
    this.setState(prevState => ({
      showFirstPart: !prevState.showFirstPart
    }));
  };

  toggleSecondPart = () => {
    this.setState(prevState => ({
      showSecondPart: !prevState.showSecondPart
    }));
  };

  render() {
    const { showFirstPart, showSecondPart } = this.state;

    return (
      <div>
        <h1>first part</h1>
        <button onClick={this.toggleFirstPart}>
          {showFirstPart ? "Hide" : "Show"}
        </button>
        {showFirstPart && (
          <div>
            <p> blablabla blablabla </p>
            <p> blablabla blablabla </p>
            <p> blablabla blablabla </p>
          </div>
        )}

        <h1>second part</h1>
        <button onClick={this.toggleSecondPart}>
          {showSecondPart ? "Hide" : "Show"}
        </button>
        {showSecondPart && (
          <div>
            <p> onetwothree onetwothree </p>
            <p> onetwothree onetwothree </p>
            <p> onetwothree onetwothree </p>
          </div>
        )}
      </div>
    );
  }
}

ReactDOM.render(<Qui />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Collectives™ on Stack Overflow

show/hide a specific <div> in react

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related