Как динамически добавить ДИВ и ссылку в React и при этом изменить их атрибуты?

Question

[Владимир]

Добрый день.
Задача состоит в следующем - есть поле для вводе и кнопка, по нажатию которой происходит запрос на OPM для получения координатов определенного географического объекта, после чего выводится ссылка с его названием, по нажатию на которую открывается модальное окно с координатами этого объекта. Если в поле ввести другой объект и нажать на кнопку, то ниже появляется еще одна ссылка, по нажатию на которую также появляется модальное окно.
Динамическое добавление я сделал, часть кода ниже:

onChangeState = (obj) => {
      const position = obj.posit;
      const lat = obj.latid;
      const lon = obj.long;
      const region = document.getElementById('region').value;
      const typeRegion = document.getElementById('typeRegion').value;
      const coordin = this.state.mainPosit;
      const link2 = this.state.newLink;
      this.setState({ coordin: coordin.push(`Центр географического объекта: широта - ${lat}, долгота - ${lon}. КООРДИНАТЫ
        ОБЪЕКТА: ${position}`) });
      this.setState({ link2: link2.push(`${region}, Тип объекта: ${typeRegion}`) });
    }
    render() {
        const region = document.getElementById('region').value;
        const shortName = '#' + region.substring(0, 5);
        const shortName2 = region.substring(0, 5);
        const listLink = this.state.newLink.map((item, index) => {
          return <a key={index} href={shortName} data-toggle="modal">{item}</a>;
        });
        const coordinates = this.state.mainPosit.map((item, index) => {
          return <div key={index} className="modal" id={shortName2} tabIndex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
            <button type="button" className="close" data-dismiss="modal" aria-hidden="true">Закрыть</button>
            <p id="centreCoordinates">{item}</p>
          </div>;
        });
        return (
                <div>
                  <button onClick={this.geoPosit}>Отправить</button>
                  {listLink}
                  {coordinates}
                </div>
        )
    }
}

Но проблема в том, что для связки ссылки и модального окна должны совпадать атрибуты href у и id у . У меня же при каждом нажатии на кнопку о...