[SOLVED] Show textfields based on form selection React

Issue

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

Solution

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

Answered By – Luca Pizzini

Answer Checked By – Clifford M. (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *