Why { ...arg} are used inside the components of react -daisyUi

Question

Why {...arg} are passed inside the daisyUi component. All components have internal {...arg} . But what does it do.

  return <Button {...args} />

Another one

<Dropdown {...args}>
    <Dropdown.Toggle>Click</Dropdown.Toggle>
    <Dropdown.Menu className="w-52">
    <Dropdown.Item>Item 1</Dropdown.Item>
    <Dropdown.Item>Item 2</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>

  return <Swap {...args} />

Answer 1

It's a frustration of mine too. Their docs just aren't very good. Basically args is an object of props, and {...args} can be used to unpack that object, as though they were props to the component.

If we look at Dropdown, we could set the hover option like:

const args = {hover: true}
<Dropdown {...args}>
...  //and so on

(More realistically probably from function props or something)

or like

<Dropdown hover >
... //and so on

Which to me is a lot more readable, but isn't as flexible if this is a part of a larger component or something.

Answer 2

Looks like, args is a Storybook thing.

Please check—

1. https://storybook.js.org
2. https://storybook.js.org/docs/react/writing-stories/args