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>
   );
 }

CodePudding user response：

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>
   );
 }