aevitas Comments - Answer Overflow

onChange={(e) =>
    setValue(value.filter((obj) => obj.name !== item.name).concat({
            name: item.name,
            amount: item.amount,
            value: e.target.value,
        })
    )
}

onChange={(e) =>
    setValue(value.filter((obj) => obj.name !== item.name).concat({
            name: item.name,
            amount: item.amount,
            value: e.target.value,
        })
    )
}

32 replies

KPCKevin Powell - Community

•Created by aevitas on 4/8/2023 in #front-end

React state question

It's just like my initial example, except the onchange now is:

32 replies

KPCKevin Powell - Community

•Created by aevitas on 4/8/2023 in #front-end

React state question

I finally got it

32 replies

KPCKevin Powell - Community

•Created by aevitas on 4/8/2023 in #front-end

React state question

Problem is there's 69 different combinations (scorch has 3, basic, intricate and powerful) so it would be hell to make all that manually

32 replies

KPCKevin Powell - Community

•Created by aevitas on 4/8/2023 in #front-end

React state question

Data for the first imbuement (scorch) is:

    {
      "name": "Scorch",
      "image": "Basic_Scorch",
      "amount": 10,
      "type": "physical converted to fire damage",
      "materials": [
        { "name": "Fiery Hearts", "amount": 25, "image": "Fiery_Heart" }
      ]
    },
    {
      "image": "Intricate_Scorch",
      "amount": 25,
      "type": "physical converted to fire damage",
      "materials": [
        { "name": "Fiery Hearts", "amount": 25, "image": "Fiery_Heart" },
        {
          "name": "Green Dragon Scales",
          "amount": 5,
          "image": "Green_Dragon_Scale"
        }
      ]
    },
    {
      "image": "Powerful_Scorch",
      "amount": 50,
      "type": "physical converted to fire damage",
      "materials": [
        { "name": "Fiery Hearts", "amount": 25, "image": "Fiery_Heart" },
        {
          "name": "Green Dragon Scales",
          "amount": 5,
          "image": "Green_Dragon_Scale"
        },
        { "name": "Demon Horns", "amount": 5, "image": "Demon_Horn" }
      ]
    },

    {
      "name": "Scorch",
      "image": "Basic_Scorch",
      "amount": 10,
      "type": "physical converted to fire damage",
      "materials": [
        { "name": "Fiery Hearts", "amount": 25, "image": "Fiery_Heart" }
      ]
    },
    {
      "image": "Intricate_Scorch",
      "amount": 25,
      "type": "physical converted to fire damage",
      "materials": [
        { "name": "Fiery Hearts", "amount": 25, "image": "Fiery_Heart" },
        {
          "name": "Green Dragon Scales",
          "amount": 5,
          "image": "Green_Dragon_Scale"
        }
      ]
    },
    {
      "image": "Powerful_Scorch",
      "amount": 50,
      "type": "physical converted to fire damage",
      "materials": [
        { "name": "Fiery Hearts", "amount": 25, "image": "Fiery_Heart" },
        {
          "name": "Green Dragon Scales",
          "amount": 5,
          "image": "Green_Dragon_Scale"
        },
        { "name": "Demon Horns", "amount": 5, "image": "Demon_Horn" }
      ]
    },

32 replies

KPCKevin Powell - Community

•Created by aevitas on 4/8/2023 in #front-end

React state question

https://tibia-calculator.netlify.app/imbuement-calculator It's for this calculator

32 replies

KPCKevin Powell - Community

•Created by aevitas on 4/8/2023 in #front-end

React state question

Not from an API, just my own json 🙂

32 replies

KPCKevin Powell - Community

•Created by aevitas on 4/8/2023 in #front-end

React state question

That would make for some real messy code..

32 replies

KPCKevin Powell - Community

•Created by aevitas on 4/8/2023 in #front-end

React state question

There's approx 70 different items and I rather not add them manually to the initialInputs variable 😄

32 replies

KPCKevin Powell - Community

•Created by aevitas on 4/8/2023 in #front-end

React state question

This indeed seems to work fine in this case, but in mine the inputs variable will be empty (there won't be any items added there), how would this work if the item doesn't exist and it has to add a new one?

32 replies

KPCKevin Powell - Community

•Created by aevitas on 4/8/2023 in #front-end

React state question

Curious what the solution is..

32 replies

KPCKevin Powell - Community

•Created by aevitas on 4/8/2023 in #front-end

React state question

Thanks ! 🙂

32 replies

KPCKevin Powell - Community

•Created by aevitas on 4/8/2023 in #front-end

React state question

I hope this makes sense

32 replies

KPCKevin Powell - Community

•Created by aevitas on 4/8/2023 in #front-end

React state question

So if test input box contains 5, a input has 10, b input has 100 then the array should be:

[
  {
    name: "test",
    amount: "25",
    value: "5",
  },
  {
    name: "a",
    amount: "2",
    value: "10",
  },
  {
    name: "b",
    amount: "15",
    value: "100",
  },
]

[
  {
    name: "test",
    amount: "25",
    value: "5",
  },
  {
    name: "a",
    amount: "2",
    value: "10",
  },
  {
    name: "b",
    amount: "15",
    value: "100",
  },
]

And when you change the input of test, only the value of test should be changed. The rest of the array should remain

32 replies

KPCKevin Powell - Community

•Created by aevitas on 4/8/2023 in #front-end

React state question

Well basically I map over an array of items, each item will create an input. If you fill in a value here, setState should add: name: e.target.name, amount: item.amount, value: e.target.value But if the array already contains an item with this name, it should just update the value

32 replies

KPCKevin Powell - Community

•Created by aevitas on 4/8/2023 in #front-end

React state question

I've commented out some other stuff I have tried (I left out the 500 variations of it though) 😄

32 replies

Gaming

Programming