0xD34F

Местами роуты поменяйте. Используется первый подошедший, а не тот, который вы у себя в голове полагаете правильным.

Сравнивайте target и currentTarget. Если отличаются - ничего не делайте.

Куда всунуть этот код? в render() ?

В componentDidMount.

this.setState(state => Object
  .keys(state)
  .reduce((acc, n) => (acc[n] = n === 'свойствоКотороеДолжноБытьTrue', acc), {})
);

Только наверное все эти булевы свойства надо убрать в отдельный объект - у вас же скорее всего ещё что-то кроме них в стейте есть.

Ну и ещё не очень понятен такой момент - а всегда ли true может быть только одно свойство? Если действительно всегда, тогда вам не нужно множество свойств, достаточно единственного, которое будет не булевым, а числом/строкой, содержащей в себе id/индекс/имя той сущности, которая в данный момент true.

this.setState({
  input: this.state.output.toString()
});

this.showAnswer();

В showAnswer вы, надо полагать, ждёте, что свойство input будет равно output.toString(). Это вряд ли. Читаем документацию внимательнее:

Think of setState() as a request rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.

Ну и про использование колбека там дальше. Так что правильно будет как-то так:

this.setState({
  input: this.state.output.toString()
}, this.showAnswer);

Так, что ли?

бибилиотека react-yandex-maps не имеет такой функциональности

Функциональность имеет - ведь это никакая не библиотека, а обёртка над картами.

Прочитать ошибку, понять, что там сказано, перестать пытаться совать объекты куда не надо.

Фигурные скобки убрать:

return { actionList };

Пусть компонент через props получает список допустимых значений:

<Range steps={[ 500, 1000, 5000, 10000 ]} />

А по событию change ищите среди них ближайшее к установленному пользователем:

class Range extends React.Component {
  state = {
    value: this.props.steps[0],
  }

  onChange = ({ target: { value } }) => {
    this.setState({
      value: this.props.steps.reduce((closest, n) =>
        Math.abs(closest - value) < Math.abs(n - value) ? closest : n
      ),
    });
  }

  render() {
    const { steps } = this.props;

    return (
      <div>
        <input
          type="range"
          min={steps[0]}
          max={steps[steps.length - 1]}
          value={this.state.value}
          onChange={this.onChange}
        />
        <p>{this.state.value}</p>
      </div>
    );
  }
}

Похоже на то, что вам нужно?

например

Параметр text - можно не только строки передавать. Например:

text={<a href="https://toster.ru">toster</a>}

Начал изучать MobX на этом ресурсе, встал вопрос.

Так вы изучайте дальше - ответ на ваш вопрос в восьмой части этого руководства.

При обновлении компонента вы вызываете метод getGenderCount, который вызывает setState, в результате чего componentDidUpdate срабатывает ещё раз, снова вызов getGenderCount - setState - compoenentDidUpdate, повторяем до бесконечности (нет, поэтому вы и здесь).

Наверное, вызывать метод getGenderCount следует не при всяком обновлении компонента, а при выполнении каких-то условий (подумайте, каких).

с большой буквы

Опечатка же - в компоненте TodoListItem вместо style у вас slyle.

Ну и это, на будущее - код здесь принято размещать в виде текста, а не картинок.

class App extends React.Component {
  state = {
    items: [...Array(20).keys()],
    chunkLen: 3,
  }

  onClick = ({ target: { dataset: { change } } }) => {
    this.setState(({ chunkLen }) => ({
      chunkLen: Math.max(2, Math.min(9, chunkLen + +change)),
    }));
  }

  render() {
    const { items, chunkLen } = this.state;
    const chunks = Array.from(
      { length: Math.ceil(items.length / chunkLen) },
      (n, i) => items.slice(i * chunkLen, (i + 1) * chunkLen)
    );

    return (
      <div>
        <button data-change="-1" onClick={this.onClick}>-</button>
        {chunkLen}
        <button data-change="+1" onClick={this.onClick}>+</button>
        <div>
          {chunks.map(chunk => (
            <div className="group">
              {chunk.map(n => <div className="group-item">{n}</div>)}
            </div>
          ))}
        </div>
      </div>
    );
  }
}

class App extends React.Component {
  state = {
    items: Array.from({ length: 10 }, (n, i) => ({
      id: i + 1,
      value: String.fromCharCode(97 + i).repeat(5),
    })),
    active: [],
  }

  toggleActive = e => {
    const id = +e.target.dataset.id;

    this.setState(({ active }) => ({
      active: active.includes(id)
        ? active.filter(n => n !== id)
        : [ ...active, id ],
    }));
  }

  render() {
    const { items, active } = this.state;

    return (
      <ul>
        {items.map(n => (
          <li
            key={n.id}
            data-id={n.id}
            onClick={this.toggleActive}
            className={active.includes(n.id) ? 'active' : ''}
          >
            {n.value}
          </li>
        ))}
      </ul>
    );
  }
}

<Switch>
    <div id="main" className="site__main">

Дочерними элементами Switch могут быть только Route или Redirect. Поменяйте их местами, что ли - пусть Switch будет внутри этого main'а.

Создаём объект, который установит соответствия между индексами и классами:

const classes = {
  0: 'first',
  [props.data.length - 1]: 'last',
};

И используем его: className={classes[i]}.

https://jsfiddle.net/w79a6q41/

Делаем метод, который будет рекурсивно обходить данные и отбрасывать элементы, у которых имя не содержит искомой строки и нет вложенных элементов (либо изначально не было, либо они отброшены). И отображаем вместо исходных данных результат работы этого метода. Как-то так.