0xD34F

document.addEventListener('click', function(e) {
  const el = document.getElementById(e.target.dataset.id);
  if (el) {
    el.checked = !el.checked;
  }
});

const buttons = document.querySelectorAll('[data-id]');
const onClick = e => checkboxes[e.target.dataset.id].checked ^= 1;
const checkboxes = Array
  .from(buttons, n => n.dataset.id)
  .reduce((acc, n) => (acc[n] = document.querySelector(`#${n}`), acc), {});

buttons.forEach(n => n.addEventListener('click', onClick));

$('.tab__list').on('click', '.tab__item', function() {
  const
    $this = $(this),
    { label, ...attrs } = text[$this.data('tab')];

  $this.siblings().removeClass('tab__item--active');
  $this.addClass('tab__item--active');
  $('#formField').attr(attrs);
  $('#formLabel').text(label);
});

onNoteAdd = {this.handleNoteAdd.bind(this)}

this.props.onNodeAdd(newNote)

const newNote = {
  title: this.state.title,
  text: this.state.text,
  color: this.state.color
};

this.props.onNodeAdd(newNote);

onChange = ({ target: { name, value } }) => {
  this.setState({ [name]: value });
}

<input
  name="title"
  onChange={this.onChange}
  ...
/>
<textarea
  name="text"
  onChange={this.onChange}
  ...
/>

.red{border:3px solid red;;}
.green{border:3px solid red;;}

.items-list-item-colors label {
  border: 3px solid red;
}

.items-list-item-colors label.active {
  border-color: green;
}

const containerSelector = '.items-list-item-colors';
const itemSelector = 'label';
const activeClass = 'active';

$(containerSelector).change(function() {
  $(itemSelector, this)
    .removeClass(activeClass)
    .has(':checked')
    .addClass(activeClass);
});

// или

document.querySelectorAll(containerSelector).forEach(n => {
  n.addEventListener('change', onChange);
});

function onChange({ target: t }) {
  this.querySelectorAll(itemSelector).forEach(n => {
    n.classList.toggle(activeClass, n.contains(t));
  });
}

// или

document.addEventListener('change', e => {
  const item = e.target.closest(itemSelector);
  if (item) {
    item.closest(containerSelector).querySelectorAll(itemSelector).forEach(n => {
      n.classList.toggle('active', n === item);
    });
  }
});

const $inner = $('.inner');
if (!$inner.find('.butt_back').length) {
  $inner.append(...);
}

$('.inner')
  .find('.butt_back').remove()
  .end()
  .append(...);

Что не так ?

canvas = document.getElementById('myCanvas');
<...>
drawImage(canvas[0],

$(window).scroll(function onScroll() {
  const $this = $(this);
  if ($this.scrollTop() > scrollToElem) {
    $('#popup-item').addClass('popup-open');
    $this.off('scroll', onScroll);
  }
});

const DataList = ({ data }) => (
  <div>
    {data.map((item) => (
      <div key={item.id}>
        {item.title}
        {item.round.map((r) => <div key={r.id}>{r.total}</div>)}
      </div>
    ))}
  </div>
);

<DataList data={props.data.slice(0, 3)} />
<Separator />
<DataList data={props.data.slice(3)} />

Проблема в реактивности, при изменении текстов в инпуте, меняются старые записанные обьекты

document.addEventListener('mouseover', ({ target: t }) => {
  if (t.classList.contains('pic') && !t.dataset.interval) {
    t.dataset.interval = bgRotate(t);
  }
});

document.addEventListener('mouseout', ({ target: t }) => {
  const { interval } = t.dataset;
  if (interval) {
    clearInterval(interval);
    delete t.dataset.interval;
  }
});

document.querySelectorAll('.pic').forEach(n => {
  n.addEventListener('mouseenter', onHover);
  n.addEventListener('mouseleave', onHover);
});

function onHover({ type, target: t }) {
  const d = t.dataset;
  if (type === 'mouseenter' && !d.interval) {
    d.interval = bgRotate(t);
  } else if (type === 'mouseleave') {
    clearInterval(d.interval);
    delete d.interval;
  }
}

.images_box a {
  display: none;
}

.images_box a.active {
  display: inline;
}

const containerSelector = '.items-list-item-wrapper';
const buttonSelector = '.items-list-item-colors input';
const contentSelector = '.images_box a';
const activeClass = 'active';


// jquery, как вы и хотели
$(containerSelector).on('change', buttonSelector, function(e) {
  $(contentSelector, e.delegateTarget)
    .removeClass(activeClass)
    .eq($(buttonSelector, e.delegateTarget).index(this))
    .addClass(activeClass);
}).each((i, n) => $(buttonSelector, n).first().click());

// или, к чёрту jquery
document.querySelectorAll(containerSelector).forEach(n => {
  n.addEventListener('change', onChange);
  n.querySelector(buttonSelector).click();
});

function onChange({ target: t }) {
  if (t.matches(buttonSelector)) {
    const buttons = this.querySelectorAll(buttonSelector);
    const index = Array.prototype.indexOf.call(buttons, t);
    this.querySelectorAll(contentSelector).forEach((n, i) => {
      n.classList.toggle(activeClass, i === index);
    });
  }
}

.head * {
  cursor: default;
}

function navFunction(id) {
  for (const n of document.querySelectorAll('.dropdown2-content')) {
    n.classList[n.id === id ? 'toggle' : 'remove']('show');
  }
}

.dropdown2 .dropdown2-content {
  display: none;
}

.dropdown2.show .dropdown2-content {
  display: block;
}

const containerSelector = '.dropdown2';
const buttonSelector = `${containerSelector} .dropbtn2`;
const activeClass = 'show';


// делегирование, назначаем обработчик клика один раз для всех кнопок
document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    document.querySelectorAll(containerSelector).forEach(function(n) {
      n.classList[n === this ? 'toggle' : 'remove'](activeClass);
    }, button.closest(containerSelector));
  }
});

// или, назначаем обработчик клика каждой кнопке индивидуально
const onClick = function({ currentTarget: t }) {
  this.forEach((n, i) => n.classList[n.contains(t) ? 'toggle' : 'remove'](activeClass));
}.bind(document.querySelectorAll(containerSelector));

document.querySelectorAll(buttonSelector).forEach(n => {
  n.addEventListener('click', onClick);
});

const RadioGroup = props => (
  <div>
    {props.items.map(n => (
      <label className={`radio ${n.val == props.value ? 'selected' : ''}`}>
        <input 
          type="radio"
          name={props.name}
          value={n.val}
          checked={n.val === props.value}
          onChange={props.onChange}
        />
        <img src={n.img} />
      </label>
    ))}
  </div>
);

const inputSelector = '#icons_care';
const checkboxSelector = '.check_care';
const checkboxCheckedSelector = `${checkboxSelector}:checked`;
const dataAttr = 'icon';
const separator = ', ';

$(document).on('change', checkboxSelector, () => {
  $(inputSelector).val($(checkboxCheckedSelector)
    .get()
    .map(n => $(n).data(dataAttr))
    .join(separator)
  );
});

// или

document.addEventListener('change', e => {
  if (e.target.matches(checkboxSelector)) {
    const input = document.querySelector(inputSelector);
    const cb = document.querySelectorAll(checkboxCheckedSelector);
    input.value = Array.from(cb, n => n.dataset[dataAttr]).join(separator);
  }
});

1. Сделайте infowindow свойством компонента. Инициализируйте его там же где и саму карту.
   
2. Перенесите назначение обработчика клика маркера из updateMap в обработчик places_changed, туда, где маркер создаётся впервые. Должно получится как-то так:
   
   

   const marker = new google.maps.Marker({
     map: this.map,
     title: place.name,
     position: place.geometry.location,
   });
   google.maps.event.addListener(marker, 'click', () => {
     this.infowindow.setContent(marker.title);
     this.infowindow.open(this.map, marker);
   });
   this.markers.push(marker);

   
   
3. Сам метод updateMap должен сильно сократиться в размерах (да и имя ему сменить не помешает - на updatePolyline, например):
   
   

   updateMap() {
     if (this.polyline) {
       this.polyline.setMap(null);
     }
   
     this.polyline = new google.maps.Polyline({
       path: this.markers.map(n => n.getPosition()),
       geodesic: true,
       strokeColor: '#FF0000',
       strokeOpacity: 1.0,
       strokeWeight: 2,
       map: this.map,
     });
   },

   
   
4. Что касается работы с элементами DOM-дерева:
   
   

   document.getElementById('map')
   <...>
   document.getElementById('inputPlace')

   
   Так дела не делаются. Стоит переписать с использованием ref.