SolidJS•2mo ago

Storybook `children` not working as expected

While migrating some code from React to Solid, I noticed an issue in how children are handled in Storybook args. The following works fine with React, but not Solid:

const Base: Story = {
  args: {
    children: <span>Button Text</span>,
  },
};

export const Red: Story = {
  args: {
    ...Base.args,
    accent: "red"
  }
};

export const Blue: Story = {
  args: {
    ...Base.args,
    accent: "blue"
  }
};

const Base: Story = {
  args: {
    children: <span>Button Text</span>,
  },
};

export const Red: Story = {
  args: {
    ...Base.args,
    accent: "red"
  }
};

export const Blue: Story = {
  args: {
    ...Base.args,
    accent: "blue"
  }
};

With Solid, if both Red and Blue are rendered on a single page, only 1 will have children. Is this expected behaviour, or an issue with the Storybook plugin? Here's an reproduction (see the 'docs' page). https://stackblitz.com/edit/solidjs-templates-2xn7hg First time using Solid, so apologies if I've done something stupid. 🙂

Cathal Mullan

StackBlitz

solid-storybook-issue - StackBlitz

Vite + solid templates

1 Reply

REEEEE•2mo ago

You can't render the same element twice Making children a function solves this issue

const Base: Story = {
  args: {
    children: () => <span>Button Text</span>,
  },
};

const Base: Story = {
  args: {
    children: () => <span>Button Text</span>,
  },
};

Gaming

Programming

Storybook `children` not working as expected