addon-controls - how do I update an arg from a function prop

[FranciscoG]

I have this component that takes a function prop which passes back a variable in its parameters and I need to set a different arg in the same component using that param

export const Usage = (args) => {
  return (
    <ImageUpload
      {...args}
      onImageSelected={(file) => {
        // I need to set `args.src` to this `file` but not sure how
      }}
    />
  );
};

Usage.args = {
  width: 128,
  height: 128,
  src: "https://picsum.photos/seed/barrel/215/215",
};

is this possible?

[FranciscoG]

I figured this out by using useState within the story component

export const Usage = (args) => {
  const [src, setSrc] = useState(args.src);

  return (
    <ImageUpload
      {...args}
      src={src}
      onImageSelected={(file) => {
         setSrc(file)
      }}
    />
  );
};

Usage.args = {
  width: 128,
  height: 128,
  src: "https://picsum.photos/seed/barrel/215/215",
};

[jamesonhill]

The only issue with this is that changing args.src via addon-controls will not update state var src without useEffect since it's bound on initialization. It would be nice if the library exposed a callback.