MDBSelect not showing select options

Topic: MDBSelect not showing select options

sandor farkas priority asked 3 years 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;

Add comment

Krzysztof Wilk staff answered 3 years ago

0 0 Best answer

Hi!

Did you try storing your select data in a state? Something like in this way:

<pre class="prettyprint"><code>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} />;
}
</code></pre>

You can also change your projects check from <code>projects === undefined</code> to <code>projects.length > 0</code>. 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.

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!

Add comment

Write

Create snippet

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 1.4.0
Device: web
Browser: chrome
OS: macOs
Provided sample code: No
Provided link: No

sandor farkas

195Support score
13Questions 13Answers 6Snippets