0

I have a drop downmenu component(material ui) and want to render different Textfields in another file based on the selection that was made in this dropdown menu. In other words if value is residential then show the textfields from the residential component

const selections = [
  {
    value: 'Residential',
    label: 'Residential',
  },
  {
    value: 'Commercial',
    label: 'Commercial',
  },
  {
    value: 'Hybrid',
    label: 'Hybrid',
  },
  {
    value: 'Corporate',
    label: 'Corporate',
  },
];

export default function Selection() {
    const [selection, setSelection] = React.useState('');

    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setSelection(event.target.value);
    };

    return (
    <Box
      component="form"
      sx={{
        '& .MuiTextField-root': { m: 1, width: '25ch' },
      }}
      noValidate
      autoComplete="off"
    >
      <div>
        <TextField
          id="outlined-select-currency"
          select
          label="Select"
          value={selection}
          onChange={handleChange}
          helperText="Please select your building type"
       >
          {selections.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </TextField>
      </div>
    </Box>
   );
 }

1 Answer 1

1

You could define a filteredSelection state to hold the filtered data to display.
When selection changes, update this state based on the current menu selection:

import { useState, useEffect } from 'react';

const selections = [
  {
    value: 'Residential',
    label: 'Residential',
  },
  {
    value: 'Commercial',
    label: 'Commercial',
  },
  {
    value: 'Hybrid',
    label: 'Hybrid',
  },
  {
    value: 'Corporate',
    label: 'Corporate',
  },
];

export default function Selection() {
    const [selection, setSelection] = useState('');
    const [filteredSelection, setFilteredSelection] = useState([])

    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setSelection(event.target.value);
    };

    useEffect(() => {
        if (selection === '') {
            // Show all selections
            setFilteredSelection([...selections])
        } else {
            // Apply filter
            setFilteredSelection([...selections].filter(sel => sel.value === selection));
        }
    }, [selection])

    return (
    <Box
      component="form"
      sx={{
        '& .MuiTextField-root': { m: 1, width: '25ch' },
      }}
      noValidate
      autoComplete="off"
    >
      <div>
        <TextField
          id="outlined-select-currency"
          select
          label="Select"
          value={selection}
          onChange={handleChange}
          helperText="Please select your building type"
       >
          {filteredSelection.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </TextField>
      </div>
    </Box>
   );
 }
2
  • thanks for your reply! is it because I'm using typescript that I get this error on the setFilteredSelection lines in the useEffect function? Type '{ value: string; label: string; }[]' is not assignable to type 'never[]'. Mar 25, 2022 at 15:10
  • i added this useState([] as any); and it worked! thanks!! Mar 25, 2022 at 15:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.