Change value of only selected Select dropdown in React

user_10839912 0
Viewed 3283

I am trying to add multiple Input fields and Select dropdown fields by clicking a button. On clicking the Add Column button, I am adding a new row to the component.

When I am changing the dropdown value in one row, because of useState all the values of the rest of the Select options are also changing.

I only want the value of the Select dropdown to change which I am changing manually.

const ModalComponent = ({ modal }) => {
const [close, setClose] = useState(true)
const [count, setCount] = useState(0)
const [type, setType] = useState('')

const handleTypeChange = (e) => {
    setType(e.target.value)
}

const removeColumnHandler = () => {
    setCount(count - 1)
}

const AddElement = () =>
    <p>
        <TextField id="outlined-basic" label="Column Name" className="add-column" variant="outlined" />
        <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={type}
            label="Type"
            onChange={handleTypeChange}
        >
            <MenuItem value="VARCHAR">String</MenuItem>
            <MenuItem value="INTEGER">Numeric</MenuItem>
            <MenuItem value="TIMESTAMP">Date</MenuItem>
        </Select>
        <DeleteOutlinedIcon
            className="delete-column"
            onClick={removeColumnHandler} />
    </p>


const addColumnHandler = () => {
    setCount(count + 1)
}

const handleClose = () => {
    if (modal) {
        setClose((prevState) => !prevState)
    }
}

return (
    <div>
        <Modal
            open={close}
            onClose={handleClose}
            aria-labelledby="modal-modal-title"
            aria-describedby="modal-modal-description"
        >
            <Box sx={style}>
                <form>
                    <FormGroup>
                        <FormControlLabel control={<Checkbox />} label="Date" />
                    </FormGroup>
                    <div className="vr"></div>
                    <div className="column-div-wrapper">
                        {[...Array(count)].map((_, i) => <AddElement key={i} />)}
                    </div>
                    <Button
                        className='add-column-button'
                        onClick={addColumnHandler}
                    >
                        Add Column
                    </Button>
                    <Button className="submit-btn">Submit</Button>
                </form>
            </Box>
        </Modal>
    </div>
)
}
react-functional-component react-hooks reactjs drop-down-menu
1 Answers

You will need to change to "type" state to an array. It will contain state of all select types, not only one. You can do it like this:

  const ModalComponent = ({ modal }) => {
  const [close, setClose] = useState(true);
  const [count, setCount] = useState(0);
  const [types, setTypes] = useState([]);

  const handleTypeChange = (e, index) => {
    const newTypes = [...types];
    newTypes[index] = e.target.value;
    setTypes(newTypes);
  };

  const removeColumnHandler = () => {
    setCount(count - 1);
  };

  const AddElement = ({ index }) => (
    <p>
      <TextField
        id="outlined-basic"
        label="Column Name"
        className="add-column"
        variant="outlined"
      />
      <Select
        labelId="demo-simple-select-label"
        id="demo-simple-select"
        value={type[index]}
        label="Type"
        onChange={(e) => handleTypeChange(e, index)}
      >
        <MenuItem value="VARCHAR">String</MenuItem>
        <MenuItem value="INTEGER">Numeric</MenuItem>
        <MenuItem value="TIMESTAMP">Date</MenuItem>
      </Select>
      <DeleteOutlinedIcon
        className="delete-column"
        onClick={removeColumnHandler}
      />
    </p>
  );

  const addColumnHandler = () => {
    setCount(count + 1);
  };

  const handleClose = () => {
    if (modal) {
      setClose((prevState) => !prevState);
    }
  };

  return (
    <div>
      <Modal
        open={close}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box sx={style}>
          <form>
            <FormGroup>
              <FormControlLabel control={<Checkbox />} label="Date" />
            </FormGroup>
            <div className="vr"></div>
            <div className="column-div-wrapper">
              {[...Array(count)].map((_, i) => (
                <AddElement key={i} index={i} />
              ))}
            </div>
            <Button className="add-column-button" onClick={addColumnHandler}>
              Add Column
            </Button>
            <Button className="submit-btn">Submit</Button>
          </form>
        </Box>
      </Modal>
    </div>
  );
};
user_15778670
Related