ating with an auditorium layout) but it is also suitable for classroom, horseshoe or royal table settings.Q: Adding inputs on click in React.js project(with Redux toolkit) I'm doing my PET project with Redux toolkit, but have some troubles with inputs. When i add an input on click it adds correctly, but i'm not sure it adds in right place(it's should be added in ITEMS array). Other issue is with it's data. If i add 2 inputs: 1) Item Name: 'Iphone 13', Unit Costs: '1200', unit: '2'; 2) Item Name: 'Iphone 12', Unit Costs: '1100', unit: '1'. It gonna add only last one and array length would be only 1.
Why is it hapenning? What i did wrong?
I've already tried using spread operator, but it shows error when i click on Add Item button.
Now the code.
InvoicesList.js file with INVOICES_LIST array which includes ITEMS where should be all items from inputs.
export const INVOICES_LIST = [
  {
    id: Math.random().toString(),
    number: Math.random().toFixed(2),
    invoice_num: "#1232",
    bill_from: "Pineapple Inc.",
    bill_to: "REDQ Inc.",
    total_cost: "14630",
    status: "Pending",
    order_date: "February 17th 2018",
    bill_from_email: "pineapple@company.com",
    bill_from_address: "86781 547th Ave, Osmond, NE, 68765",
    bill_from_phone: "+(402) 748-3970",
    bill_from_fax: "",
    bill_to_email: "redq@company.com",
    bill_to_address: "405 Mulberry Rd, Mc Grady, NC, 28649",
    bill_to_phone: "+(740) 927-9284",
    bill_to_fax: "+0(863) 228-7064",
    ITEMS: [
      {
        item_name: "A box of happiness",
        unit_costs: "200",
        unit: "14",
        price: "2800",
        sub_total: "133300",
        vat: "13300",
        grand_total: "14630",
      },
    ],
  },
  {
    id: Math.random().toString(),
    number: Math.random().toFixed(2),
    invoice_num: "#1232",
    bill_from: "AMD Inc.",
    bill_to: "Intel Inc.",
    total_cost: "14630",
    status: "Delivered",
    order_date: "February 17th 2018",
    bill_from_email: "pineapple@company.com",
    bill_from_address: "86781 547th Ave, Osmond, NE, 68765",
    bill_from_phone: "+(402) 748-3970",
    bill_from_fax: "",
    bill_to_email: "redq@company.com",
    bill_to_address: "405 Mulberry Rd, Mc Grady, NC, 28649",
    bill_to_phone: "+(740) 927-9284",
    bill_to_fax: "+0(863) 228-7064",
    ITEMS: [
      {
        item_name: "Unicorn Tears",
        unit_costs: "500",
        unit: "14",
        price: "1700",
        sub_total: "133300",
        vat: "13300",
        grand_total: "14630",
      },
    ],
  },
  {
    id: Math.random().toString(),
    number: Math.random().toFixed(2),
    invoice_num: "#1232",
    bill_from: "Apple Inc.",
    bill_to: "Samsung",
    total_cost: "14630",
    status: "Shipped",
    order_date: "February 17th 2018",
    bill_from_email: "pineapple@company.com",
    bill_from_address: "86781 547th Ave, Osmond, NE, 68765",
    bill_from_phone: "+(402) 748-3970",
    bill_from_fax: "",
    bill_to_email: "redq@company.com",
    bill_to_address: "405 Mulberry Rd, Mc Grady, NC, 28649",
    bill_to_phone: "+(740) 927-9284",
    bill_to_fax: "+0(863) 228-7064",
    ITEMS: [
      {
        item_name: "Rainbow Machine",
        unit_costs: "700",
        unit: "5",
        price: "3500",
        sub_total: "133300",
        vat: "13300",
        grand_total: "14630",
      },
    ],
  },
];

AddInvoiceItem.js file where you can find inputs and adding logic.
import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";

import { uiActions } from "../../store/ui-slice";

import classes from "./AddInvoiceItem.module.css";

import { useFormik } from "formik";

import Wrapper from "../../UI/Wrapper";
import Card from "../../UI/Card";
import Footer from "../../UI/Footer";
import Button from "../../UI/Button";

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCalendar } from "@fortawesome/free-solid-svg-icons";

import { faEllipsis } from "@fortawesome/free-solid-svg-icons";
import { invoiceActions } from "../../store/invoice-slice";
import { Link } from "react-router-dom";

const AddInvoiceItem = (props) => {
  const date = new Date();

  const options = ["Pending", "Shipped", "Delivered"];

  const inputs = [{ itemName: "", unitCosts: "", unit: "" }];

  const [startDate, setStartDate] = useState(date);
  const [selectedOption, setSelectedOption] = useState(options[0]);
  const [listItems, setListItems] = useState(inputs);

  const optionClickHandler = (value) => () => {
    setSelectedOption(value);
    dispatch(uiActions.toggleMoreOptions());
  };

  const addInvoiceHandler = (invoice) => {
    console.log(invoice);
    console.log(selectedOption);
    dispatch(
      invoiceActions.addNewInvoice({
        id: Math.random(),
        invoiceNumber: invoice.invoiceNumber,
        billFrom: invoice.billFrom,
        billFromAddress: invoice.billFromAddress,
        billTo: invoice.billTo,
        billToAddress: invoice.billToAddress,
        status: selectedOption,
        order_date: startDate.toJSON(),
        ITEMS: [
          {
            id: Math.random(),
            item_name: invoice.itemName,
            unit_costs: invoice.unitCosts,
            units: invoice.unit,
          },
        ],
      })
    );
  };

  const formikInvoice = useFormik({
    initialValues: {
      invoiceNumber: "",
      billFrom: "",
      billFromAddress: "",
      billTo: "",
      billToAddress: "",
      status: selectedOption,
      date: startDate.toJSON(),
      ITEMS: [
        {
          id: Math.random(),
          itemName: "",
          unitCosts: "",
          unit: "",
        },
      ],
    },
    onSubmit: (val) => {
      addInvoiceHandler(val);
    },
  });

  const dispatch = useDispatch();

  const toggleMoreOptions = () => {
    dispatch(uiActions.toggleMoreOptions());
  };

  const showOtherOptions = useSelector(
    (state) => state.ui.selectMoreOptionsIsVisible
  );

  let counter = 1;

  const addItemHandler = () => {
    setListItems(listItems.concat([{ itemName: "", unitCosts: "", unit: "" }]));
  };

  return (
    <form onSubmit={formikInvoice.handleSubmit}>
      <