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

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

Answer 2

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>