set state of specific attribute inside of an object - reactjs

Question

I'm struggling to figure out the syntax for setting the state of an object inside of an array. I'm trying to access the fruits amount attribute. I'm familiar with concat for adding a new object and such but instead of adding a new updated object, how do I replace the value of an attribute inside of an object keeping everything the same except the attribute that changed and not adding a completely new object.
import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
import Fruits from'./Fruits';
class App extends Component {
constructor(props) {
super(props);
this.state = {
fruits: [
{
type:'apple',
amount:10,
color:'green',
id: 0
},
{
type:'tomato',
amount:'25',
color:'red',
id: 1
}
]
};
}
renderFruits = () => {
const { fruits } = this.state;
return fruits.map((item, index) =>
<Fruits
key={index}
type={item.type}
amount={item.amount}
color={item.color}
id={item.id}
increment={this.increment}
/>
);
}
increment = (fruitId) => {
const { fruits } = this.state;
const incrementedFruit = fruits.filter((item) => {
return item.id == fruitId;
})
//{fruits: {...fruits, [fruits.amount]: [fruits.amount++]}}
}
render() {
return (
<div>
{this.renderFruits()}
</div>
);
}
}
render(<App />, document.getElementById('root'));
Fruits Component
import React, { Component } from 'react';
class Fruits extends Component {
increment = () => {
const { id } = this.props;
this.props.increment(id);
}
decrement = () => {
console.log("decremented");
}
render() {
const { type, id, amount, color} = this.props;
return(
<div>
<span>
{type}
<ul>
<li>amount: {amount} </li>
<li>color: {color} </li>
</ul>
<button onClick={this.increment}> + </button>
<button onClick={this.decrement}> - </button>
</span>
</div>
);
}
}
export default Fruits;
stackblitz project

Answer 1

First pass index from fruit, lets take as index prop :
<Fruits
key={item.id}
index = {index}
type={item.type}
amount={item.amount}
color={item.color}
id={item.id}
increment={this.increment}
/>
Then pass index, instead of id of fruit on increment :
increment = () => {
this.props.increment(this.props.index);
}
You can make your increment function 2 ways :
1 : with state mutation , Please read : State Mutation
increment = (index) => {
++this.state.fruits[index].amount;
this.forceUpdate();
//OR
this.setState({fruits : this.state.fruits});
}
2 : without state mutation
increment = (index) => {
let fruits = this.state.fruits.slice();
++fruits[index].amount;
this.setState({fruits});
}
P.S: Also found that you are using the array index as key. This is
deprecated. See
https://medium.com/#robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318
So also change :
from key={index} to key={item.id}

Answer 2

just change your increment function to this:
increment = (fruitId) => {
const { fruits } = this.state;
fruits.forEach((fruit)=>{
if(fruit.id == fruitId){
fruit.amount = parseInt(fruit.amount)+ 1;
}
})
this.setState({fruits: fruits})
}
Edited