dynamically multiple input fields in react mui 5

In this tutorial, we will create add remove multiple input dynamically fields in react with material ui (mui 5). We will see mui 5 product invoice bill dynamically multiple input fields, add remove dynamically fields example with react material UI 5.

Install & Setup Vite + React + Typescript + MUI 5

To use material ui icons you need to install @mui/icons-material.

Install the package in your project directory with:

# with npm
npm install @mui/icons-material

# with yarn
yarn add @mui/icons-material

React Material UI 5 Dynamically Multiple Input Fields Example

1. Create react mui 5 simple dynamically multiples input fields using react-mui TextField, Button component with usestate hook.

import { useState } from "react";
import TextField from "@mui/material/TextField";
import IconButton from "@mui/material/IconButton";
import DeleteIcon from "@mui/icons-material/Delete";
import Button from "@mui/material/Button";
import { Container } from "@mui/material";

export default function DynamicFields() {
  const [fields, setFields] = useState([""]);

  const handleAddField = () => {
    setFields([...fields, ""]);
  };

  const handleRemoveField = (index) => {
    const filteredFields = fields.filter((_, i) => i !== index);
    setFields(filteredFields);
  };

  return (
    <Container maxWidth="md" sx={{ mt: 8 }}>
      {fields.map((field, index) => (
        <div key={index}>
          <TextField
            value={field}
            onChange={(e) => {
              const updatedFields = [...fields];
              updatedFields[index] = e.target.value;
              setFields(updatedFields);
            }}
          />
          <IconButton onClick={() => handleRemoveField(index)}>
            <DeleteIcon />
          </IconButton>
        </div>
      ))}
      <Button variant="contained" onClick={handleAddField} sx={{ mt: 2 }}>
        Add Field
      </Button>
    </Container>
  );
}

react mui 5 dynamically multiples input fields

2. react mui 5 product invoice bill with add remove multiple input dynamically fields.

import { useState } from "react";
import {
  Box,
  Button,
  Container,
  Grid,
  IconButton,
  TextField,
  Typography,
} from "@mui/material";
import { Delete } from "@mui/icons-material";

export default function InvoiceBill() {
  const [items, setItems] = useState([{ description: "", qty: 0, rate: 0 }]);

  const handleAddItem = () => {
    setItems([...items, { description: "", qty: 0, rate: 0 }]);
  };

  const handleRemoveItem = (index) => {
    const newItems = [...items];
    newItems.splice(index, 1);
    setItems(newItems);
  };

  const handleItemChange = (event, index) => {
    const { name, value } = event.target;
    const newItems = [...items];
    newItems[index][name] = value;
    setItems(newItems);
  };

  const calculateTotal = () => {
    return items.reduce((acc, item) => {
      const amount = item.qty * item.rate;
      return acc + amount;
    }, 0);
  };

  return (
    <Container maxWidth="md" sx={{ mt: 8 }}>
      <Box sx={{ p: 2 }}>
        <Grid container spacing={2}>
          <Grid item xs={12}>
            <Typography variant="h5">Invoice Bill</Typography>
          </Grid>
          <Grid item xs={6}>
            <TextField fullWidth label="Invoice #" />
          </Grid>
          <Grid item xs={6}>
            <TextField fullWidth type="date" label="Date" />
          </Grid>
          <Grid item xs={12}>
            <Box sx={{ overflowX: "auto" }}>
              <table>
                <thead>
                  <tr>
                    <th>Description</th>
                    <th>Qty</th>
                    <th>Rate</th>
                    <th>Amount</th>
                    <th />
                  </tr>
                </thead>
                <tbody>
                  {items.map((item, index) => (
                    <tr key={index}>
                      <td>
                        <TextField
                          fullWidth
                          name="description"
                          value={item.description}
                          onChange={(event) => handleItemChange(event, index)}
                        />
                      </td>
                      <td>
                        <TextField
                          type="number"
                          name="qty"
                          value={item.qty}
                          onChange={(event) => handleItemChange(event, index)}
                        />
                      </td>
                      <td>
                        <TextField
                          type="number"
                          name="rate"
                          value={item.rate}
                          onChange={(event) => handleItemChange(event, index)}
                        />
                      </td>
                      <td>${item.qty * item.rate}</td>
                      <td>
                        <IconButton onClick={() => handleRemoveItem(index)}>
                          <Delete />
                        </IconButton>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </Box>
          </Grid>
          <Grid item xs={12}>
            <Button variant="contained" onClick={handleAddItem}>
              Add Item
            </Button>
          </Grid>
          <Grid item xs={12}>
            <Typography variant="h6">Total: ${calculateTotal()}</Typography>
          </Grid>
        </Grid>
      </Box>
    </Container>
  );
}