Migrate GeoJson to React

[stereodenis]

I can't get this code work in react-paradigm

ymaps.ready(['polylabel.create']).then(function () {
  var map = new ymaps.Map('map', {
      center: [39.218432, 51.649998],
      zoom: 11,
      controls: ['zoomControl'],
    }),
    objectManager = new ymaps.ObjectManager()
  map.controls.get('zoomControl').options.set({ size: 'small' })
  $.getJSON('data.geojson').done(function (geoJson) {
    geoJson.features.forEach(function (obj) {
      const areaNumber = obj.properties.description
      const deputat = deputats[areaNumber]
      obj.properties.balloonContent = `
          <div style="display: flex; flex-direction: row; align-items: flex-start">
            <img style="margin-right: 10px;" src="${deputat.photo}" alt="фото депутата ${deputat.name}" />
            <div>
              <div style="font-size: 18px;">${deputat.name}</div>
              <div style="margin-top: 10px;">Округ № ${areaNumber}</div>
              <div style="margin-top: 10px;">Адрес приёмной:</div>
              <div>${deputat.office}</div>
              <div style="margin-top: 10px;">Телефон приёмной:</div>
              <div>
                ${$.map(deputat.phones, function (phone) {
                  return `<a href='tel:${phone}'>${phone}</a>`
                }).join(', ')}
              </div>
              <a style="display: block; margin-top: 10px;" href="${
                deputat.website
              }" target="_blank">Перейти на сайт депутата</a>
            </div>
          </div>
        `
      obj.options = {
        // Стандартный вид текста будет темный с белой обводкой.
        labelDefaults: 'dark',
        // Макет подписи.
        labelLayout: '<div>{{properties.description}}</div>',
        // Отключим показ всплывающей подсказки при наведении на полигон.
        openHintOnHover: false,
        // Размер текста подписей зависит от масштаба.
        // На уровнях зума 3-6 размер текста равен 14, а на уровнях зума 7-18 равен 18.
        labelTextSize: { '3_6': 14, '7_18': 18 },
        cursor: 'grab',
        labelDotCursor: 'pointer',
        // Допустимая погрешность в расчете вместимости подписи в полигон.
        labelPermissibleInaccuracyOfVisibility: 4,
      }
      obj.options.fillColor = `${obj.properties.fill}75`
    })
    objectManager.add(geoJson)
    map.geoObjects.add(objectManager)

    var polylabel = new ymaps.polylabel.create(map, objectManager)
    objectManager.events.add(['mouseenter', 'labelmouseenter', 'labelmouseleave', 'mouseleave'], function (event) {
      var objectId = event.get('objectId')
      var eventType = event.get('type')
      var isSelected = eventType === 'mouseenter' || eventType === 'labelmouseenter'
      var stroke = isSelected ? 5 : 1
      objectManager.objects.setObjectOptions(objectId, {
        strokeWidth: stroke,
      })
    })
  })
})

[mmarkelov]

@stereodenis could you provide codesandbox representation, please?

[stereodenis]

@mmarkelov js implementation?

[mmarkelov]

@stereodenis your current code with react-yandex-maps or with native js

[Shokhrukh2606]

I think you should use withYmaps wrapper component!