Topic: MDBSelect not showing select options

sandor farkas priority asked 11 months ago


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;


Krzysztof Wilk staff answered 11 months ago


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!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Priority
  • 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