CODEWITHSUNDEEP
reactjsdrop-down-menumaterial-uitextfield
Mon Don
Mon Don

Reputation: 1

MUI. Select value from dropdown and add to Textfield

I want with the help of MUI create a dropdown and then based on what was selected from the dropdown menu, add this value to the Textfield and let the user edit it.

I have an array of objects with item id, description, and value. I map over them and in the dropdown show only the item.id, so that the user can select which item to show in the Textfield. In the Textfield, I pass item.description and item.value to let the user modify them.

The problem I’m facing right now is that I try to add item.value and item.description through Textfield value. It gets added, but it’s not editable. So I was wondering if is there a way to select a value from the dropdown and then add based on the selected id item.value & item.description to the Textfield ad still be able to edit the passed value.

This is what I tried:

import React, { useRef } from 'react';
import { useSelector } from 'react-redux';
import Box from '@mui/material/Box';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import TextField from '@material-ui/core/TextField';

export default function DropDown() {
  const [item, setItem] = useState('');

  const handleChange = (event: SelectChangeEvent) => {
    setItem(event.target.value as string);
  };

  const items = useSelector(state => state.itemsOverview.items);

 

  return (
    <>
      <Box
        component="form"
        sx={{
          '& .MuiTextField-root': { m: 1, width: '25ch' }
        }}
        noValidate
        autoComplete="off"
      >
        <FormControl variant="standard" sx={{ m: 1 }} fullWidth>
          <Select
            labelId="demo-simple-select-standard-label"
            id="demo-simple-select-standard"
            onChange={handleChange}
          >
            {items.map(item => (
              <MenuItem key={item.id} value={item}>
                {item.id}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      </Box>
      {}
      <TextField
        multiline
        fullWidth
        variant="filled"
        label="Description"
        value={item.description}
      />
      <TextField multiline fullWidth variant="filled" label="Value" value={item.value} />
    </>
  );
}

Upvotes: 0

Views: 4211

Answers (1)

Alexander
Alexander

Reputation: 29

You have to use onChange method in your TextField:

const valueChangeHandle = (event: React.SyntheticEvent) => {
  setItem(event.target.value);
}

<TextField
  multiline
  fullWidth
  variant="filled"
  label="Value"
  value={item.value}
  onChange={valueChangeHandle}
/>

Upvotes: 1

Related Questions