Objects are not valid as a React child when rendering an array of objects as children prop in storybook

Question

I have a component that receives children prop as an array of objects and renders them.

type Item = {
  id: number;
  name: string;
};

interface IProps {
  children: Item[];
}

const List: React.FC<IProps> = ({ children }) => {
  return (
    <ul>
      {children.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

I have created a story for this component as follows.

const Template: ComponentStory<typeof List> = (args) => <List {...args} />

export const Default = Template.bind({});
Default.args = {
  children: [
    { id: 0, name: "Apple" },
    { id: 1, name: "Google" },
    { id: 2, name: "Facebook" },
  ],
};

And I have also tried this.

export const Default: ComponentStory<typeof List> = () => (
  <List>
    {[
      { id: 0, name: "Apple" },
      { id: 1, name: "Google" },
      { id: 2, name: "Facebook" },
    ]}
  </List>
);

But either way storybook throws me the following error.

Objects are not valid as a React child (found: object with keys {id, name}). If you meant to render a collection of children, use an array instead.

What am I doing wrong here?

Answer 1

Use a different prop instead of children prop.

const List: React.FC<IProps> = ({ items }) => {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};