Using an arg to set a nested arg

[pdevito3]

So I have a story in storybook like so:

export const One = Template.bind();
One.args = {
  children: [
    <MyComponent {...Icon.args} headerText={"Header"} />,
    <MyComponent {...Standard.args}  />
  ]
};

Say the Standard.args I'm getting look like this:

Standard.args = {
  headerText: "Default Header",
  detailText: "Default details"
};

I'd like to be able to set the detailText value using a distinct arg, but don't know of a way to do it. Something like the below, but obviously with working syntax:

export const One = Template.bind();
One.args = {
  detailText: "new detail text",
  children: [
    <MyComponent {...Icon.args} headerText={"Header"} />,
    <MyComponent {...Standard.args} detailText={detailText} />
  ]
};

Is this possible? Here's the SO if anyone wants points.

[shilman]

Args currently need to be JSON serializable so you'll need to do something like this https://storybook.js.org/docs/react/essentials/controls#fully-custom-args