Обновление реквизита в компонентах высшего порядка

Question

Я пытаюсь переключить радиокнопку и обновить реквизит, чтобы установить текущее значение.

Мой Modal компонент отображает компонент RadioButton следующим образом:

<RadioButton
  currentValue={destination}
  name={text.newOpp}
  onChange={onClick}
  value={text.newOpp}
  labelText={text.newOpp}
/>

Функция onClick передается и выглядит следующим образом:

export const onClick = ({ destination }) => ({ target }) => {
  let copyDestination = {};
  copyDestination.destination = target.name;
  destination = copyDestination;
  // this doesn't really do anything
};

export default compose(
  ...
  ...
  withProps({ destination: '' }),
  ...
);

RadioButton улучшен с помощью recompose и передал эту функцию как опору:

export const checked = ({ currentValue, value }) => {
  return currentValue === value;
};

А вот так выглядит секция ввода компонента:

    <input
      checked={checked}
      className={styles.input}
      id={uniqueIdForHTML}
      name={name}
      onChange={onChange}
      type="radio"
      value={value}
    />

По сути, это должно работать так, что когда я нажимаю переключатель, я обновляю его currentValue prop до значения, равного target.name. Но я не совсем уверен, как обновить реквизит, так как они не должны быть изменены напрямую.

Answer 1

В итоге я использовал withStateHandler для создания и обновления состояния, я также изменил имя моей onClick функции на setDestination, так что это имеет больше смысла.

export const setDestination = ({ destination }) => ({ target }) => ({
  destination: target.name,
});

export default compose(
  setDisplayName('OpportunityPageFeatures/CopyDestinationModal'),
  withUniqueIDForHTML,
  withStateHandlers({ destination: '' }, { setDestination }),
  consoleLogProps,
);