Как можно улучшить этот код для маштабируемости?

Question

[mr jeery]

Есть три дива, но их количество я планирую увеличить, но для этого код нужно сделать маштабируемым, которым он сейчас не является.
Внутри каждого дива есть кнопка, которая вызывает другой компонент 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>
        );
    }
}

Comments

[Сергей Сергей]

циклами

Answer 1

[Максим]

Я за вас всю работу делать не хочу, заодно хочу мотивировать вас учиться. Так можно переписать 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)
      }
    }

Вам нужно разобраться, что значит запись через object['property'+value]... здесь

Второе запись for...in

Это вас должно натолкнуть на мысль, что вам нужно из render метода передать в функцию аргумент, как это сделать и тд тп. Сама отрисовка должна проходить через цикл/map/и прочий вариант генерирования. Суть-то будет прежняя, нужно повторяющиеся элементы выносить в аргументы функции / в переменную в шаблоне.

Comments

[Антон]

не indexOf, а includes

[Максим]

Антон, речь не о массиве, причем тут includes?

[Антон]

Максим,
1) если используем indexOf, о проверка не if(indexOf()), а if(indexOf() !== -1)
2) https://developer.mozilla.org/ru/docs/Web/JavaScri...

[Максим]

Антон, все верно, про -1 забыл, а про includes так и не привык еще. До сих пор indexOf пишу. Спасибо за замечание.