Topic: MDBSelect not showing select options
Hey, I've an issue with MDBSeelct. the prop.projects is loaded async from the parent component. As long as data is not loaded the value of projects is undefined. Right after data is loaded, the code detects the data, but the MDBSelect does not display any values. Instead the component shows "no results". I don't see what I might do wrong in this case.
Expected behavior I can select a choice after the data has been updated
Actual behavior The selectable data is not displayed as expected.
Resources (screenshots, code snippets etc.)
function Navbar(props) { const projects = props.projects;
return ( <>
<MDBContainer fluid> {projects === undefined ? <MDBSelect placeholder={t("findProjectsButtonLeft")} searchLabel={t("homeSearchLabel")} className="w-100 home-search" disabled={true} data={[]} search /> : <MDBSelect getSelectedValue={onSelect} placeholder={t("findProjectsButtonLeft")} searchLabel={t("homeSearchLabel")} className="w-100 home-search" visibleOptions={3} data={projects.map((project) => { return { text: project.title, value: project.url }; })} search />} </MDBContainer> </> ); }export default Navbar;
Hi!
Did you try storing your select data in a state? Something like in this way:
import React, { useEffect, useState } from "react";
import { MDBSelect } from "mdb-react-ui-kit";
export default function App() {
const [selectVal, setSelectVal] = useState([
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3, selected: true },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
{ text: "Six", value: 6 },
{ text: "Seven", value: 7 },
{ text: "Eight", value: 8 },
]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/todos/")
.then((data) => data.json())
.then((data) => {
data.length = 20;
const newData = data.map((el) => {
return { value: el.id, text: el.title };
});
setSelectVal(newData);
});
}, []);
return <MDBSelect data={selectVal} />;
}
You can also change your projects check from projects === undefined to projects.length > 0. There's also a possibility that this will fix this issue and it possibly can help you to avoid some problems in the future.
If nothing from here will work - could you create a simple project with the behavior you described above? It will be much easier to check :)
Keep coding!
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 1.4.0
- Device: web
- Browser: chrome
- OS: macOs
- Provided sample code: No
- Provided link: No