Adding New Items Dynamically to the React Speed Dial Component
This article explains how to add 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;
Refer to the working sample for additional details and implementation: StackBlitz.
Conclusion
We hope you found this guide on dynamically adding items to the Speed Dial component by manipulating the items property useful.
