Есть три дива, но их количество я планирую увеличить, но для этого код нужно сделать маштабируемым, которым он сейчас не является.
Внутри каждого дива есть кнопка, которая вызывает другой компонент Maps и только один Maps должен быть открыт одновременно.
Вот код, но как его можно сделать, чтобы можно было легко маштабировать количество div'oв??
import React, { Component } from 'react';
import Maps from '../components/map'
import data from '../assets/data'
import './App.scss'
export default class App extends Component {
constructor(props) {
super(props);
this.state = { showMap1: false, showMap1Value: "Открыть карту", showMap2: false, showMap2Value: "Открыть карту", showMap3: false, showMap3Value: "Открыть карту" }
this.onClick1 = this.onClick1.bind(this)
this.onClick2 = this.onClick2.bind(this)
this.onClick3 = this.onClick3.bind(this)
}
onClick1() {
if (this.state.showMap1 == true) {
this.setState({showMap1: false, showMap1Value:"Открыть карту"})
}
if (this.state.showMap1 ==false) {
this.setState({showMap1: true, showMap2: false, showMap3: false, showMap1Value:"Закрыть карту"})
}
}
onClick2() {
if (this.state.showMap2 == true) {
this.setState({showMap2: false, showMap2Value:"Открыть карту"})
}
if ( this.state.showMap2 ==false) {
this.setState({showMap2: true, showMap1: false, showMap3: false, showMap2Value:"Закрыть карту"})
}
}
onClick3() {
if (this.state.showMap3 == true) {
this.setState({showMap3: false, showMap3Value:"Открыть карту"})
}
if (this.state.showMap3 ==false) {
this.setState({showMap3: true, showMap1: false, showMap2: false, showMap3Value:"Закрыть карту"})
}
}
render() {
return (
<div className="App">
<div>
<h1>{data[0][0]}</h1>
<p>
{data[0][1]}
</p>
<input type="button" value={this.state.showMap1Value} onClick={this.onClick1} />
<div>
{ this.state.showMap1 ? <Maps item="0"/> : null }
</div>
</div>
<div>
<h1>{data[1][0]}</h1>
<p>
{data[1][1]}
</p>
<input type="button" value={this.state.showMap2Value} onClick={this.onClick2} />
<div>
{ this.state.showMap2 ? <Maps item="1"/> : null }
</div>
</div>
<div>
<h1>{data[2][0]}</h1>
<p>
{data[2][1]}
</p>
<input type="button" value={this.state.showMap3Value} onClick={this.onClick3} />
<div>
{ this.state.showMap3 ? <Maps item="2" /> : null }
</div>
</div>
</div>
);
}
}
Простой
