How can this code be improved for scalability?

Question

JavaScript

There are three divs, but I plan to increase their number, but for this the code needs to be made scalable, which it is not currently.
Within each div there is a button that calls another Maps component and only one Maps should be open at a time.
Here is the code, but how can it be done so that the number of divs can be easily scaled??

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

Answer 1

I don’t want to do all the work for you, at the same time I want to motivate you to study. So you can rewrite onClick

onClick(showMapName) {
      if (this.state[showMapName]) {
        this.setState({ [showMapName]: false, [showMap1+'Value']:"Открыть карту"})
      } else {
        for (let key in this.state) {
          let nextState = {}
          
          if (key.indexOf('showMap') !== -1) {
            nextState[key] = false // все showMap делаем false
          } 

          nextState[showMapName] = true
          nextState[showMapName+'Value'] = 'Закрыть карту'
        }
        this.setState(nextState)
      }
    }

You need to figure out what it means to write through object['property'+value]... here
The second entry for...in
This should give you the idea that you need to pass an argument from the render method to the function, how to do it, etc. etc. The rendering itself must go through the / map / cycle and another generation option. The essence will be the same, you need to take out the repeating elements in the arguments of the function / in the variable in the template.