Material UI Select Component with database data

Asked
Active3 hr before
Viewed126 times

5 Answers

componentselectmaterial
90%

Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers , Does electron physically move in an interband transition? ,Making statements based on opinion; back them up with references or personal experience.

What you need to do is create another state to hold the selected value

import React, { useState, useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  }
}));

export default function SimpleSelect() {
  const classes = useStyles();
  const [categorias, setCategorias] = useState([]);
  const [selectedCategorias, setselectedCategorias] = useState("");

  useEffect(() => {
    const getCategorias = async () => {
      const res = await fetch("/categories", {
        method: "GET",
        headers: { "Content-Type": "application/json" }
      });
      //console.log(res);
      const response = await res.json();
      setCategorias(response);
    };
    getCategorias();
  }, []);

  return (
    <FormControl className={classes.formControl}>
      <InputLabel id="demo-simple-select-label">Categorias</InputLabel>
      <Select
        labelId="demo-simple-select-filled-label"
        id="demo-simple-select-filled"
        value={selectedCategorias}
        onChange={(ev) => setselectedCategorias(ev.target.value)}
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        {categorias.map((categoria) => (
          <MenuItem key={categoria.id} value={categoria.id}>{categoria.nombre}</MenuItem>
        ))}
      </Select>
    </FormControl>
  );
}

load more v
88%

Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element.,Here are some examples of customizing the component. You can learn more about this in the overrides documentation page.,The Select component is meant to be interchangeable with a native <select> element.

To properly label your Select input you need an extra element with an id that contains a label. That id needs to match the labelId of the Select e.g.

<InputLabel id="label">Age</InputLabel>
<Select labelId="label" id="select" value="20">
   <MenuItem value="10">Ten</MenuItem>
   <MenuItem value="20">Twenty</MenuItem>
</Select>
load more v
72%

there are some limitations in use some components that are created to work internally like a controlled,We create an wrapper component that abstract all the boilerplate and expose the use just like an simple Select component. ,The function of Controller component is to wrapper the controlled component and make it easier for work with them. It was created to work with Material UI 💖

const trinityPersons = [{
      value: "father",
      text: "Father"
   },
   {
      value: "son",
      text: "Son"
   },
   {
      value: "spirit",
      text: "Holy Spirit"
   },
];
load more v
65%

Create React Select Component Using Material UI,You can also read Autocomplete Example Using React.,Now, cd into the react-select-example folder.

Pretag
 Pretag team - issue, fix, solve, resolve
75%

Search Answer Titles

Pretag
 Pretag team - issue, fix, solve, resolve

Other "component-select" queries related to "Material UI Select Component with database data"