1

I'm trying to get the simplest Material UI Select to work in React with Typescript. I spend three hours on searching for an example which shows how to set the label or placeholder (I checked all properties of the API and those are the only ones that make sense).

There's simply no demo, example, tutorial, howto, article, documentation page that puts together look and code. A billion pages with mostly extremely complex code examples, but code only. And a billion pages with demos and image. Your chance to create the first useful explanation how to use Material UI Select!

The situation is simple: My code is

import React from "react" import ReactDOM from "react-dom" import MuiSelect from '@material-ui/core/Select' import MuiMenuItem from '@material-ui/core/MenuItem' class MyComponent extends React.Component<any, MyComponentState> { constructor(props: any) { super(props); this.state = {selectedAge: ""} } render() { return <div className="container"> <MuiSelect id="offerType" label="Age" placeholder="Age" variant="outlined" value={this.state.selectedAge}> <MuiMenuItem value="1"/> </MuiSelect> </div> } } type MyComponentState = { selectedAge: string; } ReactDOM.render( <MyComponent/>, document.getElementById("root") )

The expected output is an of these

enter image description here

from https://material-ui.com/components/selects/

And the current output is

enter image description here

Improve this question
1
  • 1
    All of the demos have code associated with them. Click the <> below the demo to show the code or click the pencil to edit it in code sandbox. The simplest way to do a select with a label is to use TextField. Commented Feb 11, 2020 at 23:04

1 Answer 1

Reset to default
1

As simple as I could make it

import React from "react"; import MuiSelect from "@material-ui/core/Select"; import MuiMenuItem from "@material-ui/core/MenuItem"; import InputLabel from "@material-ui/core/InputLabel"; import { FormControl } from "@material-ui/core"; class MyComponent extends React.Component<any, MyComponentState> { constructor(props: any) { super(props); this.state = { selectedAge: "" }; this.handleChange = this.handleChange.bind(this); } handleChange(evt: React.ChangeEvent<HTMLSelectElement>) { this.setState({ selectedAge: evt.target.value }); } render() { return ( <FormControl> <InputLabel id="age">Age</InputLabel> <MuiSelect onChange={this.handleChange} labelId="age" value={this.state.selectedAge} style={{width: '13em'}} > <MuiMenuItem value="1">1</MuiMenuItem> <MuiMenuItem value="2">2</MuiMenuItem> </MuiSelect> </FormControl> ); } } type MyComponentState = { selectedAge: string; };

You can check it out on codesandbox

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

The labels not placed correctly this way (not like for TextField and this looks very inconvenient). I doubt that specifying the label in a separate component is the right approach. I assume it's added complexity which shows exactly the problem with the examples I'm describing in the question. A simple example showing the use of material component does not exist. Yet.
Thanks for you explanation and your answer. To be fair, I did upvote. I removed the "correct answer" mark because the framework is just too disappointing. React and material UI being hyped by a lot of people turns out to require this set of code for a something that I expect to be solvable in a oneliner in any framework that deserves any attention. Do I have to go back to JSF? I'll give you back the "correct answer" because your intentions are good and the answer acutally answers my question the way I asked it.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.