Я хочу создать идентификатор для состояния и получить сгенерированный идентификатор, чтобы я мог использовать его в функции

Question

Мне нужна помощь с действительно сложным вопросом.

Я постараюсь сделать его как можно более понятным.

Итак, я генерирую по нажатию кнопки еще одну кнопку.

И когда нажата сгенерированная кнопка, появятся несколько других кнопок.

Последние кнопки - это кнопки + и -, которые добавят число в состояние, а затем состояние будет отображаться в виде текста. .

Но я хочу, чтобы при нажатии первой кнопки появлялись новые последние кнопки, но я хочу как-то присвоить государству новый идентификатор, чтобы каждый раз, когда я нажимал + или -, это не влияло на первые последние созданные кнопки.

В двух словах я хочу попробовать создать такую ​​систему, как Airbnb или booking.com, чтобы я мог создать много комнат с разным количеством кроватей, когда кто-то добавит новое жилье.

Но если у вас есть другая идея сделать такую ​​вещь, дайте мне знать.

Вот что я сделал до сих пор:

import React, { Component } from 'react';
import Select, { components } from 'react-select';
import styles from '../styles/loginsignup.css'
import axios from 'axios'
import nextId,{ resetId } from "react-id-generator";
export default class AccomodationInfo extends Component {

    constructor() {
        super();
        this.state = {
            accomcate: null,
            addroom: [''],
            single: 0,
            double: 0,
            king: 0,
            superking: 0,
            bunk: 0,
            sofa: 0,
            button: 0,
            isLoading: true,
            showHideSidenav: 'd-none',

        }
      }



    handleClick = event => {
        const htmlId = nextId()
        const htmlId2 = nextId("Room")
        event.preventDefault()
        this.setState({ addroom: [...this.state.addroom, htmlId2] })
        this.setState({ single: [...this.state.single1, htmlId] })
        this.setState({ double: [...this.state.double, htmlId] })
        this.setState({ king: [...this.state.king, htmlId] })
        this.setState({ superking: [...this.state.superking, htmlId] })
        this.setState({ bunk: [...this.state.bunk, htmlId] })
        this.setState({ button: [...this.state.button, htmlId] })
        this.setState({ sofa: [...this.state.sofa, htmlId] })
        }

    singleAdd = event  => {
        event.preventDefault()
        this.setState({single: this.state.single + 1})
        }
    singleRemove = event  => {
        event.preventDefault()
        this.setState({single: this.state.single - 1})
        }
    doubleAdd = event  => {
        event.preventDefault()
        this.setState({single: this.state.double + 1})
        }
    doubleRemove = event  => {
        event.preventDefault()
        this.setState({single: this.state.double - 1})
        }
    kingAdd = event  => {
        event.preventDefault()
        this.setState({single: this.state.king + 1})
        }
    kingRemove = event  => {
        event.preventDefault()
        this.setState({single: this.state.king - 1})
        }
    superkingAdd = event  => {
        event.preventDefault()
        this.setState({single: this.state.suoerking + 1})
        }
    superkingRemove = event  => {
        event.preventDefault()
        this.setState({single: this.state.superking - 1})
        }
    bunkAdd = event  => {
        event.preventDefault()
        this.setState({single: this.state.bunk + 1})
        }
    bunkRemove = event  => {
        event.preventDefault()
        this.setState({single: this.state.bunk - 1})
        }
    sofaAdd = event  => {
        event.preventDefault()
        this.setState({single: this.state.sofa + 1})
        }
    sofaRemove = event  => {
        event.preventDefault()
        this.setState({single: this.state.sofa - 1})
        }
    buttonAdd = event  => {
        event.preventDefault()
        this.setState({single: this.state.button + 1})
        }
    buttonRemove = event  => {
        event.preventDefault()
        this.setState({single: this.state.button - 1})
        }



    toggleSidenav = event => {
        event.preventDefault()
        if (this.state.showHideSidenav == 'd-none'){
            this.setState({"showHideSidenav":''});
        }
        else {
            this.setState({"showHideSidenav":'d-none'});
        }

    }


    render() {
        const{accomcate,  isLoading}  = this.state
    if (isLoading) {
        return(
            <div>
            {isLoading && <div class="text-center">
            <div class="spinner-border" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            </div>}
            </div>
        )
    }

    else{ 
        return(

            <div>
                <div><h3>Let's add your {accomcate} rooms</h3></div>
                <div className="qty mt-5">
                <span className="minus2 bg-primary" onClick={this.handleRemove}>-</span>
                <input type="number" className="count2" name="qty" defaultValue={0} />
                <span className="plus2 bg-primary" onClick={this.handleClick}>+</span>
                </div>
                <div>
                {this.state.addroom.map((addroom) => (
                <div>

                  <button type="button" class="btn btn-primary mt-3" style={{width: '25%' }} onClick={this.toggleSidenav} id= {addroom} >Addbeds</button>
                    <div className={this.state.showHideSidenav} id= {addroom}>
                        <center>
                        <div className="panel panel-default" style={{width: '25%' }}>
                            <div class="panel-body">Single
                            <button className="ml-3 mr-3 bg-primary button-indent" onClick={this.singleRemove}>-</button>
                            <span>
                                {this.state.single}
                            </span>
                            <button className="bg-primary button-indent ml-3 mr-3" onClick={this.singleAdd}>+</button></div>
                            <div class="panel-body">Double bed</div>
                            <div class="panel-body">King size</div>
                            <div class="panel-body">Super-king size</div>
                            <div class="panel-body">Bunk bed</div>
                            <div class="panel-body">Sofa bed</div>
                            <div class="panel-body">Button layer</div>
                        </div>
                        </center>
                    </div>
                </div>
                ))}
              </div>
                </center>
            </div>



        )


    }


}
}