CODEWITHSUNDEEP
javascriptreactjssemantic-ui-react
user13704414
user13704414

Reputation:

Semantic UI React: Cannot take values from REST API for dropdown

I am trying to use the Dropdown element of Semantic UI React. It is meant to work with a REST API that allows to get a list of movies. React is configured to fetch data from the appropriate REST API application (this already works for other elements of the frontend).

I would like to get the list of movie names as options. Please have a look at the following JS snippet.

import React, { useState, useEffect } from "react";
import { Dropdown } from "semantic-ui-react";

export const MovieDropdown = () => {
  const [movie, setMovie] = useState("");
  const [movieOptions, setMovieOptions] = useState([]);

  useEffect(() => {
    fetch("/movies")
      .then((response) => response.json())
      .then((data) =>
        setMovieOptions(
          data.map((x) => {
            return { key: x.name, text: x.name, value: x.name };
          })
        )
      );
  }, []);

  return (
    <Dropdown
      placeholder="Select Movie"
      search
      selection
      options={movieOptions}
      onChange={(e) => setMovie(e.target.value)}
    />
  );
};
export default MovieDropdown;

I could not figure it out from https://react.semantic-ui.com/modules/dropdown/#usage-remote.

Upvotes: 2

Views: 737

Answers (1)

wuarmin
wuarmin

Reputation: 4015

Your code looks good. Change a small thing and it will work:

onChange={e => setMovie(e.target.value)} // you cannot use event in setState. furthermore checkout the second param of the onChange-Event

to

onChange={(e, {value}) => setMovie(value)}

checkout fixing-react-warning-synthetic-events-in-setstate

here's the full working code

import React, { useState, useEffect } from "react";
import { Dropdown } from "semantic-ui-react";

export const MovieDropdown = () => {
  const [movie, setMovie] = useState("");
  const [movieOptions, setMovieOptions] = useState([]);

  useEffect(() => {
    fetch("/movies")
      .then((response) => response.json())
      .then((data) =>
        setMovieOptions(
          data.map((x) => {
            return { key: x.name, text: x.name, value: x.name };
          })
        )
      );
  }, []);

  return (
    <Dropdown
      placeholder="Select Movie"
      search
      selection
      options={movieOptions}
      onChange={(e, {value}) => setMovie(value)}
    />
  );
};
export default MovieDropdown;

Upvotes: 1

Related Questions