Sending data to a child component within Storybook

Looking for a more efficient method to pass values to a nested component in Storybook. Instead of explicitly listing each value, is there a way to set them all at once?

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

Any solution to set all the values together 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

To achieve this functionality, utilize the spread operator:

function DropMenu(properties) {
    return (
    <div className="drop-menu">
        <Button {...properties} />
    </div>
)}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am looking to update the background color of the material UI helper text

In the image below, you can see that my background color is gray and my text field color is white. When an error is shown, the text field's white color extends and the password error message doesn't look good. I want the text field to remain whit ...

Guide to validating password and confirm password fields with React Hook Form and Yup

const formOption = { config = [ { label: 'Password', name: 'password', type: 'password', rules: yup.string().required() }, { label: 'Confirm password', ...

What is the best way to incorporate two transitions in Material UI?

I am attempting to incorporate both the Fade and Slide functionalities within the same component. <Slide in={isValid} timeout={timeout} direction="left"> <Fade in={isValid} timeout={timeout}> <Foo ...

Error in child component's class name with babel-plugin-react-css-modules

I'm currently implementing babel-plugin-react-css-modules in an existing React project. Most of the components are working as expected, but I've encountered an issue with passing styles to child components. My parent components look like this: ...

Personalizing the React Bootstrap date picker

I am currently working on customizing the react-bootstrap-daterangepicker to achieve a specific look: My goal is to have distinct background colors for when dates are selected within a range and when the user is hovering over dates to make a selection. I ...

What is the advantage of not importing related modules?

As a newcomer to React, please excuse any novice questions I may have. I am currently utilizing npx create-react-app to develop a React app, but I'm unsure of the inner workings: Q1-If I were to throw an error in a component like so: import React, { ...

Guide on how to handle asynchronous API data mapping within Next.js server components

Encountering an issue where the map fails to display my items following an api call. export default async function LoginPage() { const res = await fetch("http://127.0.0.1:3000/api/machines"); if (!res.ok) { throw new Error("Failed t ...

The deployed app on Heroku is showing a 304 status code with no JSON response

I've been working on a project using React, Express, and MongoDB. While everything works fine locally, I encountered an issue with GET requests after deploying the project on heroku.com. Instead of receiving the expected JSON response, I'm gett ...

When attempting to deploy on Firebase, an error is encountered stating, "Both hosting key and legacy hosting keys are present in firebase.json."

Encountering issues with firebase deploy: Camerons-MacBook-Pro-2:showboost cameronedwards$ firebase deploy ⚠ Warning: "firebase" key in firebase.json is deprecated. Please use firebase use --add instead. ⚠ Hosting: Identified hosting key in fire ...

Tips for refreshing the apollo cache

I have been pondering why updating data within the Apollo Client cache seems more challenging compared to similar libraries such as react-query. For instance, when dealing with a query involving pagination (offset and limit) and receiving an array of item ...

Unveiling the process of extracting JWT token from a request using Next-Auth

Is there a way to extract the JWT session token from an upcoming request in next-AUTH framework? I need to fetch the JWT token from a different server for verification. The technology stack I am working with includes nextJs integrated with next-AUTH. ...

Is it possible to align divs so that they touch when they wrap to a new line, creating a grid-like appearance?

My React board component consists of an array of divs that I want to arrange in a grid-like map. The issue is, when the div wraps to a new line, there is significant space between each row. I aim to have the divs close together with no gaps. GameMap state ...

Issue with React Material UI: Snackbar is closing when Dialog closes which is not the intended behavior

When using Material UI dialog, it unexpectedly closes the snackbar as well. To illustrate this strange issue, I have prepared a demonstration: https://codesandbox.io/s/react-hooks-counter-demo-v20w3 I am passing states from the parent component to the c ...

How can the table column drag and drop feature be activated in material-ui?

After consulting the official documentation, I attempted to use DataGridPro in order to create a table. However, I encountered difficulty triggering a response after dragging the table. Despite trying various methods outlined in the documentation, none o ...

Steps for clearing the cache in React Native fetch

I am facing an issue with my react native app where it is not updating the fetched file from the server even after I have made changes to the file. I am currently debugging using expo. Here are the troubleshooting steps I have taken: Cleared the DNS ca ...

Having trouble getting Tailwind to function properly after installing Next.js 13

Despite following the same installation steps for Tailwind multiple times since nextjs 13 was released, I have been experiencing issues. Here is my package.json file. To replicate, I used npx create-next-app@latest and followed the instructions in the Tai ...

What is the best way to ensure that your node packages are always current and up

I recently set up an app using a truffle react box, but when I run npm install, I receive numerous deprecation warnings and notifications that some packages have missing dependencies. Is there a reliable method or online resource where I can update my pack ...

Tips for being patient while waiting for a function to return a value

I'm working on a React class and I'm facing an issue. The problem is that the variable isTokenActive is returning undefined, and I suspect it's because I need to wait for the function checkIfRefreshTokenWorking to return a value. componentD ...

Error: module 'next/react' not found

Recently delving into next.js, I encountered an error after creating a project with npx create-next-app. Oddly enough, the app still runs despite this issue. { "resource": "/E:/codes/news-website/news-website/pages/index.js", ...

Inquiring about react-hook-form: why does getValues not retrieve the latest value?

I am facing an issue with my radio buttons labeled A, B, and C. Specifically, under button B, there is a select box that I want to make 'required' only when B is selected. Below is the simplified code snippet: interface ButtonFormType { not ...