0

I am currently trying to get this button to increment the "stock" value of each car. If someone can explain why it isn't working that would be super helpful.

I tried to keep this short but I am also very unsure of what's causing the buttons to do absolutely nothing. I feel like I have really strong logic with implementing these but none of them work. Any help is appreciated.

Dan21538
  • 1
  • 1
  • Swear I've seen this question before...anyways, your incrementing code makes no sense. It increments `this.state.stock`, but your state is an **array** of **objects**. So you'd need to pass in something to the increment function like make and model that lets you identify which car object in the array you're referring to, then iterate over the array and increment THAT car's stock value. – Jayce444 Mar 22 '21 at 03:06
  • @Jayce444 so when i initialize increment can I just pass in "this"? because that doesnt seem to work either. and it wont let me pass in something like "this.state.stock" – Dan21538 Mar 22 '21 at 03:24
  • You can pass `car` object: `onClick={() => this.increment(car)}`. But how will you know which `car` item is this as there is no unique value in array like `id`. So, maybe give each car element an `id`. – Ajeet Shah Mar 22 '21 at 03:26
  • So when assigning the onClick function to the button it should be like: `onClick={() => this.increment(car.manufacturer, car.model)}` and the increment function should be like this: `increment(manufacturer, model) { this.setState({ cars: this.state.cars.map(car => (car.manufacturer === manufacturer && car.model === model) ? {...car, stock: car.stock + 1} : car) }) };` - I haven't run that code so might be some syntax or spelling errors, but that should give you an idea of how to handle it. If manufacturer+model isn't unique enough, then you might need to assign them all unique, consistent IDs – Jayce444 Mar 22 '21 at 03:29
  • @Jayce444 when you wrote "{...car," what's that mean? if I've already checked whether the car manufacturer and model match then shouldn't I just be able to increment after that? – Dan21538 Mar 22 '21 at 03:39
  • 1
    `...` is [Spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax). It is being used to create a shallow copy of `car` object here. – Ajeet Shah Mar 22 '21 at 03:44
  • @AjeetShah I tried using Jayce444 's method and it didn't work. I am completely at loss on how to get this fixed – Dan21538 Mar 22 '21 at 03:54
  • Edit your question and show us How you wrote it. Also, you can [format](https://stackoverflow.com/a/54665086/2873538) your code using VSCode so that it would look nice. – Ajeet Shah Mar 22 '21 at 03:55
  • @AjeetShah ok i edited the question you should be able to see my current code – Dan21538 Mar 22 '21 at 04:00
  • This is the correct code. Try `type="button"` for the button. – Ajeet Shah Mar 22 '21 at 04:03
  • @AjeetShah nope that didn't change anything. The page will still render but the buttons are useless. – Dan21538 Mar 22 '21 at 04:06
  • Try this https://codesandbox.io/s/stackoverflow-cars-ipwgl It works. – Ajeet Shah Mar 22 '21 at 04:07
  • @AjeetShah when I run yours in the sandbox it works perfectly, but for some reason my npm in Cmd doesn't like the Spread syntax. I still cant get mine to work, but I appreciate all your help – Dan21538 Mar 22 '21 at 04:16
  • Try `Object.assign({}, car, {stock: car.stock + 1})` if `...` is not recognized in your setup. See the [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) Check my *updated* sandbox. – Ajeet Shah Mar 22 '21 at 04:18
  • @AjeetShah it won't take that either. It says "try comma instead of period" between object and assign{}. I'm not sure why but it wont take that. I might just call it quits. You've been so much help thank you – Dan21538 Mar 22 '21 at 04:23

0 Answers0