Change label of Select Component using material ui react

Advi

I'm working on material ui react storybook . I want user to change the label , Below is what i have tried with that the Input Label is not taking any value which making select component without any label. I cannot use TextField , because i'm working on select component. I have to achieve this with the Input Label. Thanks

Input looks as so ..

 import React from "react";
    import { Theme, useTheme } from "@mui/material/styles";
    import ReactDOM from "react-dom";
    import InputLabel from "@mui/material/InputLabel";
    import MenuItem from "@mui/material/MenuItem";
    import FormControl from "@mui/material/FormControl";
    import Select, { SelectChangeEvent } from "@mui/material/Select";
    
    const age = ["Ten", "Twenty", "Thirty"];
    export const SelectBa = ({}) => {
      const theme = useTheme();
      const [personName, setPersonName] = React.useState([]);
    
      const handleChange = (event: SelectChangeEvent<typeof personName>) => {
        const {
          target: { value }
        } = event;
        setPersonName(typeof value === "string" ? value.split(",") : value);
      };
    
      return (
        <div>
          <FormControl sx={{ m: 1, width: 300 }} size={size}>
            <InputLabel id="demo-simple-select-label">{selectname.map((label) => { label })}</InputLabel>
            <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              value={personName}
              onChange={handleChange}
              input={<OutlinedInput label="Name" />}
            >
              {age.map((age) => (
                <MenuItem
                  key={age}
                  value={age}
                  style={getStyles(age, personName, theme)}
                >
                  {age}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        </div>
      );
    };
    
    export default SelectBa;


stories.js

export const Selectde = SelectBa.bind({});
SelectDefault.args = {    
    selectname: [{ label: 'Select' }],

};
Okan Karadag

You should use return keyword in {}

<InputLabel id="demo-simple-select-label">
      {selectname.map((item) => { return item.label })}
</InputLabel>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to write a wrapper around a material UI component using React JS?

enzyme not simulating change event on React Material-UI v1 - Select component

React Dropbox Component using Material-UI-Next

Change color of Select component's border and arrow icon Material UI

How to make a 'Select' component as required in Material UI (React JS)

Material UI Select component crashing React application

How to resove label overlapping issue for React Material UI auto complete component

How to change outline color of Material UI React input component?

React testing library on change for Material UI Select component

material ui warning in using `textField` component with `select`

material-ui component style customization – change color of select component to white

How to change material UI select border and label

Problem with using map to populate select in React / Material UI

Set JSON object to a Const on material UI Select component React Hooks

React Popover component - Material UI

How to style react material ui select component height

Material UI: How to change font size of label in React Material Ui Stepper?

Change Material UI label to white on switch not working

Is there a way to create a component as shown in the image below using react material UI

How to change the dropdown hover color react Material-UI Select

Using material ui and React, change the style of the `carrot` in TextField

How to handle select change using material-ui in reactjs and Mongodb

Add dynamic value beside label in Material UI React Tabs Component

Change color of the IconComponent of Material UI's Select Component

How to style material-ui select component with style-components (not material-ui classes!) in react?

React+Material UI: How to change the font size of the Select component?

Change color of Material UI Select component border not working

Material UI Autocomplete component (React)

Unable to Select options from select component using material ui react

TOP Ranking

  1. 1

    Failed to listen on localhost:8000 (reason: Cannot assign requested address)

  2. 2

    Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

  3. 3

    How to import an asset in swift using Bundle.main.path() in a react-native native module

  4. 4

    pump.io port in URL

  5. 5

    Compiler error CS0246 (type or namespace not found) on using Ninject in ASP.NET vNext

  6. 6

    BigQuery - concatenate ignoring NULL

  7. 7

    ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

  8. 8

    ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

  9. 9

    Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

  10. 10

    How to remove the extra space from right in a webview?

  11. 11

    java.lang.NullPointerException: Cannot read the array length because "<local3>" is null

  12. 12

    Jquery different data trapped from direct mousedown event and simulation via $(this).trigger('mousedown');

  13. 13

    flutter: dropdown item programmatically unselect problem

  14. 14

    How to use merge windows unallocated space into Ubuntu using GParted?

  15. 15

    Change dd-mm-yyyy date format of dataframe date column to yyyy-mm-dd

  16. 16

    Nuget add packages gives access denied errors

  17. 17

    Svchost high CPU from Microsoft.BingWeather app errors

  18. 18

    Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

  19. 19

    12.04.3--- Dconf Editor won't show com>canonical>unity option

  20. 20

    Any way to remove trailing whitespace *FOR EDITED* lines in Eclipse [for Java]?

  21. 21

    maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

HotTag

Archive