Complex State Help / Best Practice
So I am making a crafting calculator for a game where each item costs different amounts of things to create, and some of them have overlap.
For example, a rocket could take the following resources and components to create.
And a C4 could require the following.
My UI allows for 3 ways to change the number of any item they are using in the calculator (see screenshot). They can manually enter a number, subtract one, or add one.
I am running into some confusion on how to update this state. Each "card" (screenshot area) has an amount state which tracks the number in the input box. This amount is going to determine the calculations. Its tricky when they combine different items like the rocket and C4 example I sent. When they type in the input I have an onChange event handler, when they click either of the buttons I am changing the amount state. A little bit stuck and would appreciate any advice for best practices here. Thanks
I have an idea for a really ugly way but I am confident its not correct
For example, a rocket could take the following resources and components to create.
And a C4 could require the following.
My UI allows for 3 ways to change the number of any item they are using in the calculator (see screenshot). They can manually enter a number, subtract one, or add one.
I am running into some confusion on how to update this state. Each "card" (screenshot area) has an amount state which tracks the number in the input box. This amount is going to determine the calculations. Its tricky when they combine different items like the rocket and C4 example I sent. When they type in the input I have an onChange event handler, when they click either of the buttons I am changing the amount state. A little bit stuck and would appreciate any advice for best practices here. Thanks
I have an idea for a really ugly way but I am confident its not correct
