Passing values to a nested component in Storybook

Question

Is there a better way to pass values to a nested component in Storybook? I can explicitly state each individual value, but that seems very inefficient.

function Dropdown({ label, type, size, title, disabled }) {
    return (
    <div className="dropdown">
        <Button
            label={label}
            type={type}
            size={size}
            title={title}
            disabled={disabled}
        />
    </div>
)}

Is there a way to pass all the values at once?

dropdown.stories.js

export const DropdownButton = Template.bind({});
DropdownButton.args = {
    label: "Dropdown label",
    type: "btn-primary dropdown-toggle",
    size: "btn-sm",
    title: "",
    disabled: false,
}

Answer 1

You can use the spread operator:

function Dropdown(props) {
    return (
    <div className="dropdown">
        <Button {...props} />
    </div>
)}