React Creating Dynamic Select and Option Elements with Material-UI

Question

So, I honestly thought this would take me 15 minutes, but I'm up around 5 hours right now. What's bothering me so much is that I know it's a simple solution, and I've tried a few different approaches as well.

I have a React App, and inside the Diagnosis Component, I have two dropdown elements that allow users to choose the Make and Model of their appliance. What I'm trying to do is allow the user to choose which Make they have, and when the make dropdown is selected, the models dropdown populates automatically.

Here is my MakeandModel.js file:

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

import makeandmodel_DATA from './makeandmodel_DATA';

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

console.log(makeandmodel_DATA);

export default () => {
    const classes = useStyles();
    const [data, setData] = useState();
    const [make, setMake] = useState('');
    const [model, setModel] = useState('');

    useEffect(() => {
        
    });

    const handleMakeChange = (event) => (
        setMake(event.target.value)
    );

    const handleModelChange = (event) => (
        setModel(event.target.value)
    );

    return (
        <>
            <FormControl variant="outlined" className={classes.formControl}>
                <InputLabel id="demo-simple-select-outlined-label">Make</InputLabel>
                <Select
                    labelId="demo-simple-select-outlined-label"
                    id="demo-simple-select-outlined"
                    value={make}
                    onChange={handleMakeChange}
                    label="Make"
                >
                    <MenuItem value="">
                        <em>Choose a Make</em>
                    </MenuItem>
                    {makeandmodel_DATA.map((make, index) => (
                        <MenuItem key={index} value={make.name}>{make.name}</MenuItem>
                    ))}
                </Select>
            </FormControl>

            <FormControl variant="outlined" className={classes.formControl}>
                <InputLabel id="demo-simple-select-outlined-label">Model</InputLabel>
                <Select
                    labelId="demo-simple-select-outlined-label"
                    id="demo-simple-select-outlined"
                    value={model}
                    onChange={handleModelChange}
                    label="Model"
                >
                    <MenuItem value="">
                        <em>Choose a Model</em>
                    </MenuItem>
                    
                </Select>
            </FormControl>
            <br />
       </>
    );
};

I also have some sample data I'm importing to try to populate my Make and Model dropdowns. Here is the code from the makeandmodel_DATA.json file:

[
    {
        "name": "Dyson",
        "models": [
            {
                "name": "v12"
            },
            {
                "name": "v10"
            },
            {
                "name": "ball"
            }
        ]
    },
    {
        "name": "Oreck",
        "models": [
            {
                "name": "Upright"
            },
            {
                "name": "Unique"
            },
            {
                "name": "XL"
            }
        ]
    },
    {
        "name": "Electrolux",
        "models": [
            {
                "name": "Classic"
            },
            {
                "name": "Vintage"
            },
            {
                "name": "New School"
            }
        ]
    },
    {
        "name": "Kirby",
        "models": [
            {
                "name": "Heavy"
            },
            {
                "name": "Light"
            },
            {
                "name": "Regular"
            }
        ]
    },
    {
        "name": "Hoover",
        "models": [
            {
                "name": "Windtunnel"
            },
            {
                "name": "Back"
            },
            {
                "name": "Upright"
            }
        ]
    }
]

I've tried to map over the imported data, but every time I do that to find the models, I end up returning undefined.

I've also tried to wire up the useEffect function, but couldn't figure out exactly to wire it up correctly that way either.

Like I said, I feel like the solution is super simple, but I'm overlooking something fundamental. I'm really just looking for a super simple solution that looks clean and works well. If you need any other information to help us solve this problem, just ask.

Thanks in advance!

bbernag · Accepted Answer · 2021-01-27 21:01:11Z

The best practice here is to create an object where you save your models by the Make name.

const models = React.useMemo(() => {
  const modelsValues = {};
  makeandmodel_DATA.forEach(({ name, models }) => {
    modelsValues[name] = models;
  })

 return modelsValues;
})

You only need to save the model name as you are doing it. Then you need to access to the selected Make models, and finally your Make select is gonna be something like this:

         {make && <FormControl variant="outlined" className={classes.formControl}>
            <InputLabel id="demo-simple-select-outlined-label">Model</InputLabel>
            <Select
                labelId="demo-simple-select-outlined-label"
                id="demo-simple-select-outlined"
                value={model}
                onChange={handleModelChange}
                label="Model"
            >
                <MenuItem value="">
                    <em>Choose a Model</em>
                </MenuItem>
              {models[make] ? models[make].map(model=> {
                // Here goes your models option
                return <MenuItem value="">
                    <em>Choose a Model</em>
                </MenuItem>
                }) : null
               }
            </Select>
        </FormControl>}

Maybe I have a typo but If you could give me a sandbox this can be more simple to fix.

Jim · Accepted Answer · 2021-01-27 21:33:13Z

5

That's a great solution!

I did the same exact thing, and I added an index to the map function to add a key to each MenuItem and set the value attribute and child on each MenuItem to model.name

{make && <FormControl variant="outlined" className={classes.formControl}>
         <InputLabel id="demo-simple-select-outlined-label">Model</InputLabel>
         <Select
             labelId="demo-simple-select-outlined-label"
             id="demo-simple-select-outlined"
             value={model}
             onChange={handleModelChange}
             label="Model"
         >
             <MenuItem value="">
                 <em>Choose a Model</em>
             </MenuItem>
             {models[make] 
                 ? models[make].map((model, index) => (
                     <MenuItem key={index} value={model.name}>{model.name}</MenuItem>
                 ))
                 : null
             }
    

     </Select>
</FormControl>}

answered Jan 27, 2021 at 21:33

Jim

1131 gold badge2 silver badges8 bronze badges

1 Comment

bbernag Over a year ago

Nice, I just forgot to add the value and key to the options 😅

Himanshu Shukla · Accepted Answer · 2024-02-14 09:09:30Z

A template you can use for when using dynamic select in material UI

                  <Select
                    displayEmpty
                    {...register('productName', { required: 'Product Name is required' })}
                    renderValue={(selected) => {
                        if (!selected || selected.length === 0) {
                            return <em disabled>Choose product</em>;
                        } else {
                            return typeof selected === 'string' ? selected?.trim() : selected;
                        }
                    }}
                    MenuProps={{
                        PaperProps: {
                            style: {
                                maxHeight: 48 * 4.5 + 8,
                                // width: '100%',
                            },
                        },
                    }}
                    fullWidth>
                    {productsData.length === 0 ? (
                        <MenuItem disabled value=''>
                            <em>None</em>
                        </MenuItem>
                    ) : (
                        productsData.map((product) => {
                            return (
                                <MenuItem key={product.id} value={product.name}>
                                    {product.name}
                                </MenuItem>
                            );
                        })
                    )}
                </Select>

Collectives™ on Stack Overflow

React Creating Dynamic Select and Option Elements with Material-UI

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related