Topic: MDBSelect crashes when you remove the last item from the data list
clickstudioltd priority asked 9 months ago
When you remove the last item of the data list while there is more than 1 item in the list, MDBSelect
crashes.
Example:
import React, { useMemo, useState } from 'react';
import {
MDBSelect,
MDBContainer,
} from 'mdb-react-ui-kit';
import 'mdb-react-ui-kit/dist/css/mdb.min.css';
export default function App() {
const [selectedItems, setSelectedItems] = useState([]);
const items = useMemo(() => ([
{ text: 'Item 1', value: 'Item1' },
{ text: 'Item 2', value: 'Item2' },
{ text: 'Item 3', value: 'Item3' },
]), []);
const availableItems = useMemo(() => items.filter(item => !selectedItems.includes(item.value)), [items, selectedItems]);
return (
<MDBContainer className="p-3">
<MDBSelect
label="Items"
data={availableItems}
search
onChange={e => setSelectedItems([...selectedItems, e.value])}
/>
<div className="mt-3">
<div>Selected items:</div>
{selectedItems.map((item, index) => <div key={index}>{item}</div>)}
</div>
</MDBContainer>
);
}
If you select other items except the last one, it'll be fine but if you select the last item, you'll see it crash.
Add comment
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 7.1.0
- Device: PC
- Browser: Mozilla Firefox
- OS: Windows 10
- Provided sample code: Yes
- Provided link: No