如何在 map ZC1C425268E68385D1AB5074C17A94F1 中更改 object state

Question

I need to increase or decrease state value in catalog > spec > units , if I click on increase button the number in units should increase by one and if I click on decrease button it should decrease by one, I'd tried by setting state in the render, but it didn't work and I think this is not a good practice. How can I create a function to setState of units without declaring it inside the render method?

Here is an example of my code:

export default class Order extends Component {

  constructor(props) {
    super(props);
    this.state = {
      catalog: [
        {
          photo: 'https://via.placeholder.com/400x400',
          title: 'My title',
          description: 'Bla bla bla...',
          spec: { size: 'FAM', units: 1, price: 999999, id: 'CMB0', selectedIndicator: '', isSelected: false, name: 'A simple name' },
          isCombo: true
        },
      ],
    }
  }
}

render(){
   return(
      {this.state.catalog.map((item, index) => {
         <div key={index}>
            <strong>{item.title}</strong>
            <span>{item.spec.units}</span>
            <button onClick={() => item.spec.units + 1}>increase</button>
            <button onClick={() => item.spec.units - 1}>decrease</button>
         </div>})
      }
   )
}

Answer 1

Try this

increase = title => {
    const newCatalogState = this.state.catalog.map(item => {
      if (item.title === title) {
        return {
          ...item,
          spec: {
            ...item.spec,
            units: item.spec.units + 1
          }
        };
      }
      return item;
    });
    this.setState({
      catalog: newCatalogState
    });
  };

 decrease = title => {
    const newCatalogState = this.state.catalog.map(item => {
      if (item.title === title) {
        return {
          ...item,
          spec: {
            ...item.spec,
            units: item.spec.units - 1
          }
        };
      }
      return item;
    });
    this.setState({
      catalog: newCatalogState
    });
  };

<button onClick={() => this.increase(item.title)}>increase</button>
<button onClick={() => this.decrease(item.title)}>decrease</button>

you can check here codesandbox hope it helps

Answer 2

Try this:

export default class Order extends Component {

  constructor(props) {
    super(props);
    this.state = {
      catalog: [
        {
          photo: 'https://via.placeholder.com/400x400',
          title: 'My title',
          description: 'Bla bla bla...',
          spec: { size: 'FAM', units: 1, price: 999999, id: 'CMB0', selectedIndicator: '', isSelected: false, name: 'A simple name' },
          isCombo: true
        },
      ],
    }
  }
}

const updateUnits = (index, value) => {
  const { catalog } = this.state
  catalog[index].spec.units += value
  
  this.setState({catalog})
}

render(){
   return(
      { this.state.catalog.map((item, index) => {
         <div key={index}>
            <strong>{item.title}</strong>
            <span>{item.spec.units}</span>
            <button onClick={() => this.updateUnits(index, 1)}>increase</button>
            <button onClick={() => this.updateUnits(index, -1)}>decrease</button>
         </div>})
      }
   )
}