Implementing clickable actions to add new entries in a React.js application (using Redux toolkit)

Question

Implementing clickable actions to add new entries in a React.js application (using Redux toolkit)

I am currently working on my PET project using Redux toolkit and encountering some issues with inputs. When I add an input on click, it gets added correctly, but I am unsure if it is being added in the right place (it should be added in the ITEMS array). Another issue is with the data itself. If I add 2 inputs as follows: 1) Item Name: 'Iphone 13', Unit Costs: '1200', unit: '2'; 2) Item Name: 'Iphone 12', Unit Costs: '1100', unit: '1'. It only adds the last one and the array length remains 1.

Why is this happening? What did I do wrong?

I have already tried using the spread operator, but it shows an error when I click on the Add Item button.

Here is the code:

InvoicesList.js file contains the INVOICES_LIST array which includes ITEMS where all items from inputs should be stored.

...

AddInvoiceItem.js file contains the inputs and adding logic for invoices.

...

invoice-slice.js file holds the invoiceSlice functionality.

...

Additionally: Should each item have a unique id? I am unsure if that is necessary.

P.S. Here is the link to the GitHub repository for this project - https://github.com/stepan-slyvka/test-project

P.P.S. This is my PET project, so please excuse the mix of using Context in one page and Redux in another. It's solely for learning purposes.

javascript reactjs redux input redux-toolkit

Answer 1

Answer №1

I have reviewed your code and found a possible solution to make it work smoothly. However, you may want to consider whether to utilize formik's state as the primary state for listItems and restructure your code accordingly.

Here is a basic method to resolve your issue, which can serve as a reference for making decisions on how to handle it:

Add the following snippet to your AddinvoiceItem.js file:

const updateItemHandler = (index, inputName, value) => {
  listItems[index] = {...listItems[index], [inputName]: value};
}

const updateValuesOnSubmit = () => {
  return listItems;
}

Then, update every input (itemName, unitCosts, unit) to utilize the new function in its onChange parameter like this:

onChange={(e) => updateItemHandler(index, 'THIS has to be the name of the input, for example itemName', e.currentTarget.value)}

Modify addInvoiceHandler to integrate the new function into its dispatch:

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: [
      ...updateValuesOnSubmit()
    ],
  })
);
};

Lastly, navigate to invoice-slice.js and adjust the implementation as follows:

ITEMS: [
  ...newItem.ITEMS
],

This approach enables you to include multiple items within an invoice in your redux state. I recommend considering Formik's state management and features for handling form data, as you have already chosen it for this task.

Nevertheless, this method offers one way to achieve your desired outcome. I hope this information proves helpful!

Answer 2

I have reviewed your code and found a possible solution to make it work smoothly. However, you may want to consider whether to utilize formik's state as the primary state for listItems and restructure your code accordingly.

Here is a basic method to resolve your issue, which can serve as a reference for making decisions on how to handle it:

Add the following snippet to your AddinvoiceItem.js file:

const updateItemHandler = (index, inputName, value) => {
  listItems[index] = {...listItems[index], [inputName]: value};
}

const updateValuesOnSubmit = () => {
  return listItems;
}

Then, update every input (itemName, unitCosts, unit) to utilize the new function in its onChange parameter like this:

onChange={(e) => updateItemHandler(index, 'THIS has to be the name of the input, for example itemName', e.currentTarget.value)}

Modify addInvoiceHandler to integrate the new function into its dispatch:

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: [
      ...updateValuesOnSubmit()
    ],
  })
);
};

Lastly, navigate to invoice-slice.js and adjust the implementation as follows:

ITEMS: [
  ...newItem.ITEMS
],

This approach enables you to include multiple items within an invoice in your redux state. I recommend considering Formik's state management and features for handling form data, as you have already chosen it for this task.

Nevertheless, this method offers one way to achieve your desired outcome. I hope this information proves helpful!

Implementing clickable actions to add new entries in a React.js application (using Redux toolkit)

Answer №1

Similar questions

Solve the issue of location dependency warning when using the React useEffect hook

Guide to importing a JSON file in a Node.js JavaScript file

.toggle function malfunctioning

Is it possible to use combox to deactivate the buttons?

Exploring techniques to maintain search functionality on altered display columns in DataTables.js

Looking for a custom JavaScript color wheel with advanced features?

Creating a fluid side navigation bar in reactjs

Saving vast array in MongoDB

Can you explain the distinction between the server component and client component in Nextjs 14?

Alter the arrow to dynamically point towards the location of the click source

employing strings in passing functions as arguments

Displaying the current time and total time of a custom video player using Javascript

The number of elements in a React prop array is showing as zero

What is a clever way to monitor the completion of a forEach loop using promises?

Conceal a division on a webpage according to the URL of the specific

Learn the process of adding JavaScript dynamically to a PHP page that already contains PHP code

Encountered a Dojo error of "TypeError {stack: (...), message: "undefined is not a function"}" when attempting to display a gif during an ajax load

React-snap causing trouble with Firebase

Using the built-in http module in node.js to upload images via multipart/form-data

What is the method for graphing data points that include two different y values?