This way we're correctly able to calculate the total price for the selected toppings as you can see below. Then we're setting that totalPrice value to the total state using setTotal(totalPrice) If the checkedState array value is false, then we're not adding its price but just returning the calculated previous value of sum. If it's true, that means the checkbox is checked so we're adding the value of the corresponding price using sum + toppings.price. Then inside the reduce function, we're checking if the current value of the checkedState array is true or not. We're also passing 0 as the initial value, which is also known as the accumulator value for the sum parameter. You can use different names if you want as they're just parameters. The array reduce method receives four parameters, of which we're using only three: sum, currentState and index. Then to calculate the total price, we're using the array reduce method: const totalPrice = updatedCheckedState.reduce( You can read this article if you're not familiar with how state works in React. So we've created a separate variable and used that in the reduce method. Just because you called the setCheckedState function does not guarantee that you will get the updated value of the checkedState array in the next line. This is because, by default, the setCheckedState function used to update the state is asynchronous. We're using the reduce method on updatedCheckedState and not on the original checkedState array. Note that we've created a separate updatedCheckedState variable and we're passing that variable to the setCheckedState function. Take a look at the below code: export default function App() In React, Controlled Input is managed by state, so the input value can be changed only by changing the state related to that input. So we're able to easily check and uncheck the checkbox as shown below:īut to display on the screen whether it's checked or not, we need to convert it to Controlled Input. In the above code, we've just declared a single checkbox which is similar to how we declare an HTML checkbox. So if you're not familiar with React Hooks, check out my Introduction to React Hooks article. In this article, I will be using React Hooks syntax for creating components. Let's start with single checkbox functionality before moving on to multiple checkboxes. Here's a preview of the app we'll be building in the course. This article is a part of my Mastering Redux course. How to create an array of a specific length pre-filled with some specific value.
How to use the array map and reduce methods for complex calculation.How to use a checkbox as a Controlled Input in React.So in this article, we'll see how to work with multiple checkboxes in React. Handling multiple checkboxes in React is completely different from how you use regular HTML checkboxes.
0 kommentar(er)
