Adding New Items Dynamically to the React Speed Dial Component

The React Speed Dial component provides options to display multiple action items. This guide will walk you through the process of dynamically adding new items to the Speed Dial. For a quick start with the Speed Dial component, please refer to this link.

Adding items dynamically

The Speed Dial component allows you to dynamically add new items by setting the items property. In the example below, a new item is created and added to the speedDialItems array when the button is clicked. This array is then assigned to the items property of the Speed Dial component.

import React from 'react';
import { SpeedDialComponent, ButtonComponent } from '@syncfusion/ej2-react-buttons';

let count = 1;
let speedDialInstance;

const onBtnClick = () => {
    if (count === 6) return;
    let speedDialItems = [...speedDialInstance.items];
    let newItem = {
        title: "New Item " + count,
        iconCss: 'speeddial-icons speeddial-icon-item' + count
    };
    speedDialItems.push(newItem);
    speedDialInstance.items = speedDialItems;
    alert("Added " + count++ + " new item" + (count > 2 ? "s" : "") + ".");
};

const App = () => {
    return (
        <>
            <ButtonComponent onClick={onBtnClick}>Add new item</ButtonComponent>
            <SpeedDialComponent ref={speedDial => speedDialInstance = speedDial} ... items={items}></SpeedDialComponent>
        </>
    );
};

export default App;

You can view a live sample of this code on StackBlitz.

Conclusion

We hope you found this guide on dynamically adding items to the Speed Dial component by manipulating the items property useful.

Additional References

• React Speed Dial feature tour
• React Speed Dial demos
• Speed Dial component documentation
• React Buttons Package