Topic: MDBSelect crashes when you remove the last item from the data list
clickstudioltd pro premium priority asked 10 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.
Mateusz Lazaru staff answered 10 months ago
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 7.1.0
- Device: PC
- Browser: Mozilla Firefox
- OS: Windows 10
- Provided sample code: No
- Provided link: No