Почему при первом рендере компонента данные из store не попадают в условие для параметра кнопки?

Question

[Анастасия]

Значение dateIndicator приходит из store и изначально равно 'М' - то есть изначально класс active должен присвоиться кнопке М по тернарному условию для параметра className - что не происходит при первом рендере компонента. Класс active не присваивается ни одному элементу. В дальнейшем при нажатии событие отрабатывает верно и класс присваивается. Как сделать так, чтобы при загрузке компонента класс active присваивался ?

export const ControlIndicators = ({ position }) => {
  const dispatch = useDispatch();
  const dateIndicator = useSelector(getDateIndicator);

  const clickHandler = value => {
    dispatch(setDateIndicator(value));
  };

  const buttons = [
    { title: 'Дневной показатель', value: 'Д' },
    { title: 'Месячный показатель', value: 'М' },
  ];

  return (
    <Control position={position} className="leaflet-bar-row">
      {buttons.map(item => {
        return (
          <button
            className={
              dateIndicator === item.value
                ? 'buttons-leaflet-row-item active'
                : 'buttons-leaflet-row-item'
            }
            title={item.title}
            value={item.value}
            onClick={() => clickHandler(item.value)}
          >
            {item.value === 'Д' ? 'Д' : 'М'}
          </button>
        );
      })}
    </Control>
  );
};

Answer 1

[Владимир]

Исходя из тех данных, что вы предоставили невозможно ответить на вопрос.
Вот пример без стейта и там работает.
https://codesandbox.io/s/billowing-dream-d4r3c?fil...
Локализуйте проблему в песочнице и киньте ссылку.