How to open a tab element on a site that is written in React.js?

Question

React

import React, { Component } from 'react';
import './Faq.css';

class Faq extends Component {
  state = {
    isOpen : false
  }
  render() {
    return (

          <div className="faq-page">
                <section>

                  <div id="open-btn" className={this.state.isOpen ? "isactive" : "ishidden"} onClick = {this.open}>
                     <div className="open-btn">
                              <div className="open-img1"></div>
                              <div className="open-img2"></div>
                             </div>
                         </div>
                   
                
                  <div className={this.state.isOpen ? "show-answer" : "hide-answer"}>
                      			<div className="answer-wrapper">
                      				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                      				 Impedit quaerat aperiam quibusdam suscipit accusantium,
                      				 dolores architecto numquam, ducimus sed. Quod a quia veritatis 
                      				 ipsum alias tempore facilis, sunt rem exercitationem!</p>		              			
                        	  	</div>
                    </div>
                  </section>
                <section>

                  <div id="open-btn" className={this.state.isOpen ? "isactive" : "ishidden"} onClick = {this.open}>
                     <div className="open-btn">
                              <div className="open-img1"></div>
                              <div className="open-img2"></div>
                             </div>
                         </div>
                   
                
                  <div className={this.state.isOpen ? "show-answer" : "hide-answer"}>
                      			<div className="answer-wrapper">
                      				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                      				 Impedit quaerat aperiam quibusdam suscipit accusantium,
                      				 dolores architecto numquam, ducimus sed. Quod a quia veritatis 
                      				 ipsum alias tempore facilis, sunt rem exercitationem!</p>		              			
                        	  	</div>
                    </div>
                  </section>
                <section>

                  <div id="open-btn" className={this.state.isOpen ? "isactive" : "ishidden"} onClick = {this.open}>
                     <div className="open-btn">
                              <div className="open-img1"></div>
                              <div className="open-img2"></div>
                             </div>
                         </div>
                   
                
                  <div className={this.state.isOpen ? "show-answer" : "hide-answer"}>
                      			<div className="answer-wrapper">
                      				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                      				 Impedit quaerat aperiam quibusdam suscipit accusantium,
                      				 dolores architecto numquam, ducimus sed. Quod a quia veritatis 
                      				 ipsum alias tempore facilis, sunt rem exercitationem!</p>		              			
                        	  	</div>
                    </div>
                  </section>

      </div>
    );
  }
  open = () => this.setState ({
    isOpen : !this.state.isOpen
  })
}

export default Faq;

There is this code and you need to click on the div id="open-btn" to open exactly the one that belongs to the div id="open-btn". And now, on pressing, they open all at once. You can decide on a crutch and create 3 variables that will contain true false, but this is not my choice

Answer 1

Instead of manually creating each block, put the text content of the blocks in an array, map it. Instead of isOpen, store the index of the open block (if only one can be open), or add isOpen to each element of the array (if multiple blocks can be open at the same time).