Как открытие вкладку элемента на сайте который написан на React.js?

Question

[kitas]

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;

Имеется вот этот код и нужно, что бы по нажатию на div id="open-btn" открывался именно тот который относится к div id="open-btn". А сейчас по нажатию открываются все сразу. Можно решить костыльно и создать 3 переменные которые будут содержать true false, но это не мой выбор

Comments

[kitas]

Можно решить костыльно и создать 3 переменные которые будут содержать true false, но это не мой выбор

Answer 1

[0xD34F]

Вместо того, чтобы вручную создавать каждый блок, кладите текстовое содержимое блоков в массив, делайте по нему map. Вместо isOpen храните индекс открытого блока (если открыт может быть только один) или добавьте isOpen каждому элементу массива (если одновременно могут быть открыты несколько блоков).

Comments

[kitas]

Я знаю как это в теории сделать, но можете скинуть код react на практике.

[0xD34F]

open = e => this.setState({
  active: +e.target.dataset.index,
})

render() {
  return (
    <div className="faq-page">
    {this.state.items.map((n, i) => (
      <section>
        <div id="open-btn" className={this.state.active === i ? "isactive" : "ishidden"} onClick={this.open} data-index={i}>
          <div className="open-btn">
            <div className="open-img1"></div>
            <div className="open-img2"></div>
          </div>
        </div>
        <div className={this.state.active === i ? "show-answer" : "hide-answer"}>
          <div className="answer-wrapper">
            <p>{n}</p>
          </div>
        </div>
      </section>
    ))}
    </div>
  );
}

[kitas]

спасибо