Updating props in Higher Order Components

Question

I'm trying to toggle a radio button and update a prop to what current value it's set on.

My Modal component is rendering a RadioButton component as so:

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

The onClick function is being passed in and looks like this at the moment:

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 is enhanced with recompose and passed this function in as a prop:

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

And this is what the input section of the component looks like:

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

Essentially, the way this should work is that when I click on a radio button, I update its currentValue prop to whatever target.name is equal to. But I'm not entirely sure how to update the prop since they should not be altered directly.

Why you using recompose when there are hooks? Are you just trying to update props of HOC? — Dennis Vash, Jun 17 '19 at 17:19
I'm abiding to the coding standards from this project. It's about a year old so everything's built with recompose. — user7496931, Jun 17 '19 at 17:21
`currentValue` prop gets value from `destination` - update the `destination` - probably by `setState` in the parent/component that renders `` - read docs about `'lifting state up' — xadm, Jun 17 '19 at 19:02

score 0 · Answer 1 · answered Jun 17 '19 at 19:19

I ended up using withStateHandler to create a state and update it, I also changed the name of my onClick function to setDestination so it makes more sense.

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

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

Updating props in Higher Order Components

1 Answers1