How to make the code scaleable?

Question

There are three divas, but I plan to increase their number, but for this, the code needs to be made scalable, which it is not now. Inside each diva there is a button that calls another Maps component and only one Maps must be open at the same time.

Here's the code, but how can it be done so that you can easily increase the number of div ??

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)
    this.onClick = this.onClick.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 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 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 map"})
    }
}

onClick() {

}

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>
    );
}
}

Answer 1

The trick is to store your maps in an array within state, then keep track of which map you're working using an index.

 class App extends Component {
   constructor() {
     super();
     this.state = {
       maps: [
        { showing: false, value: "Open map" },
        { showing: false, value: "Open map" },
        { showing: false, value: "Open map" }
       ]
     };
   }

   onClick(index) {
     if (this.state.maps[index].showing) {
       // Open the map at this index
     } else {
       // Close the map at this index
     }
   }

   render() {
     return (
       <div className="app">
         {this.state.maps.map((map, index) => (
           <div>
             <h1>{data[index][0]}</h1>
             <p>{data[index][1]}</p>
             <input type="button" value={map.value} onClick={e => this.onClick(index)} />
             <div>{map.showing && <Maps item={index} />}</div>
           </div>
         })}
       </div>
     )
   }
 }