How can I improve this code for scalability?

There are three diva, but I plan to increase, but this code should do scalable, which it is not.
Inside every diva has a button that calls another component and only one Maps Maps must be opened at the same time.

Here is the code, but it can be done, so you can easily masturbirovat number div's??
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: "Open map", showMap2: false, showMap2Value: "Open map", showMap3: false, showMap3Value: "Open map" }
 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:"Open map"})

}

 if (this.state.showMap1 ==false) {
 this.setState({showMap1: true, showMap2: false, showMap3: false, showMap1Value:"Close the map"})
}
}

 onClick2() {
 if (this.state.showMap2 == true) {
 this.setState({showMap2: false, showMap2Value:"Open map"})
}

 if ( this.state.showMap2 ==false) {
 this.setState({showMap2: true, showMap1: false, showMap3: false, showMap2Value:"Close the map"})
}
}

 onClick3() {
 if (this.state.showMap3 == true) {
 this.setState({showMap3: false, showMap3Value:"Open map"})
}

 if (this.state.showMap3 ==false) {
 this.setState({showMap3: true, showMap1: false, showMap2: false, showMap3Value:"Close the map"})
}
}

 render() {

 return (
 <div classname="App">
the <div>
<h1>{data[0][0]}</h1>
<p>
{data[0][1]}
</p>
 <input type="button" value="{this.state.showMap1Value}" onclick="{this.onClick1}">

the <div>
 { this.state.showMap1 ? <maps item="0"> : null }
</maps></div>

</div>
the <div>
<h1>{data[1][0]}</h1>
<p>
{data[1][1]}
</p>
 <input type="button" value="{this.state.showMap2Value}" onclick="{this.onClick2}">
the <div>
 { this.state.showMap2 ? <maps item="1"> : null }
</maps></div>
</div>

the <div>
<h1>{data[2][0]}</h1>
<p>
{data[2][1]}
</p>
 <input type="button" value="{this.state.showMap3Value}" onclick="{this.onClick3}">

the <div>
 { this.state.showMap3 ? <maps item="2"> : null }
</maps></div>
</div>
</div>
);
}
}
June 7th 19 at 15:43
1 answer
June 7th 19 at 15:45
I for you don't want to do, at the same time want to motivate you to study. So we can rewrite the onClick
onClick(showMapName) {
 if (this.state[showMapName]) {
 this.setState({ [showMapName]: false, [showMap1+'Value']:"Open map"})
 } else {
 for (let key in this.state) {
 let nextState = {}

 if (key.indexOf('showMap') !== -1) {
 nextState[key] = false // do all showMap false
 } 

 nextState[showMapName] = true
 nextState[showMapName+'Value'] = 'Close map'
}
this.setState(nextState)
}
 }


You need to understand what it means to write using object['property'+value]... here

The second entry for...in

This should give you an idea of what you need from the render method to pass to the function argument like this to do so. The rendering itself must pass through the loop/map/and other variant generation. The essence of something is the same no need to duplicate items to make the arguments to the function / variable in the template.
not indexOf, and includes - timmothy.Tromp43 commented on June 7th 19 at 15:48
it's not about the mountains, and here includes? - dannie.Stehr commented on June 7th 19 at 15:51
,
1) if you use indexOf, about the test is not if(indexOf ()) and if(indexOf() !== -1)
2) https://developer.mozilla.org/ru/docs/Web/JavaScri... - timmothy.Tromp43 commented on June 7th 19 at 15:54
all right , I forgot about -1 and about includes and not used. Still indexOf write. Thank you for your comment. - dannie.Stehr commented on June 7th 19 at 15:57

Find more questions by tags JavaScriptReact