How to handle state on Flat List Items in React-Native

Question

I am setting a counter on the items of the FlatList component of React-Native. How can I update the list item every time the user press the "+" or "-" button?

I am currently being able to update the value on the state, however the list doesnt display the new state. I have tried adding extraData component to the FlatList, but it doesnt seem to update anyways.

This is the data structure

      data: [
        {
          id: 1,
          name: "Bread",
          price: "400",
          imageS: "../resources/pan-corteza-blanda.jpg",
          quantity: 2
        },
... more data

This is the function that handles the increment

  handleIncrement = i => {
    this.setState(state => {
      const formatData = state.data.map((item, j) => {
        console.log("Id", i + " /// " + item.id);
        if (item.id === i) {
          item.quantity = item.quantity + 1;
          return item;
        } else {
          return item;
        }
      });
      console.log("FormatData" + formatData); //Displays the correct  quantity of the item updated

      return {
        formatData
      };
    });
  };

And this is the list component

  <FlatList
          data={this.state.data}
          style={styles.list}
          extraData={this.state.data}
          renderItem={this.renderItem}
        />

I expect to update the text component of the list item with the right quantity value every time a user presses the "+" or "-" button.

Answer 1

You need to update the data state instead of returning an item.

handleIncrement = i => {

  const item = this.state.data[i];

  this.setState({
    data: [
      ...this.state.data.slice(0, i),
      Object.assign({}, this.state.data[i], { quantity: item.quantity + 1 }),
      ...this.state.data.slice(i + 1)
    ]
  });
};

You can refactor the function and use it for both - and +.

// pass array index and quantity 1 for + and -1 for -
handleIncrement = (i, qty) => {
  const item = this.state.data[i];

  if (item && item.quantity === 0 && qty === -1) {
    return;
  }

  this.setState({
    data: [
      ...this.state.data.slice(0, i),
      Object.assign({}, this.state.data[i], { quantity: item.quantity + qty, }),
      ...this.state.data.slice(i + 1),
    ],
  });
};

Below is demo that uses the above function, it's in reactjs. The function will work in react native too.

h1, p {
  font-family: Lato;
}

.container {
  display: flex;
  flex-direction: row;
  border-bottom-style: solid;
  margin-bottom: 5px;
}

.image-container {
  flex-grow: 0;
}

.info-container {
  display: flex;
  margin-left: 10px;
  flex-direction: row;
}

.title {
  margin-top: 0;
}

.titleContainer {
  width: 100px;
}

.cover {
  width: 30px;
}

.buttons {
  flex-grow: 1;
  display: flex;
  margin-left: 10px;
}

.incrementButtons {
  width: 20px;
  height: 20px;
  margin-left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>

<script type="text/babel">

class Item extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="image-container">
          <img className="cover" src={this.props.image} />
        </div>
        <div className="info-container">
          <div className="titleContainer">
            <p className="title">{this.props.title}</p>
          </div>
          <div className="buttons">
            <p className="title">{this.props.qty}</p>
            <img onClick={() => this.props.increment(this.props.index, -1)} className="incrementButtons" src="https://img.icons8.com/metro/26/000000/minus-math.png" />
            <img onClick={() => this.props.increment(this.props.index, 1)} className="incrementButtons" src="https://img.icons8.com/metro/26/000000/plus-math.png" />
          </div>
        </div>
      </div>
    )
  }
}

class App extends React.Component {

  state = {
    data: [
      {
        id: 1,
        name: 'Avocado',
        price: '400',
        imageS: 'https://img.icons8.com/metro/26/000000/avocado.png',
        quantity: 0,
      },
      {
        id: 6,
        name: 'Bread',
        price: '300',
        imageS: 'https://img.icons8.com/metro/26/000000/bread.png',
        quantity: 0,
      },
      {
        id: 2,
        name: 'Milk',
        price: '300',
        imageS: 'https://img.icons8.com/metro/26/000000/milk-bottle.png',
        quantity: 0,
      },
    ],
  };

  handleIncrement = (i, qty) => {
    const item = this.state.data[i];

    if (item && item.quantity === 0 && qty === -1) {
      return;
    }

    this.setState({
      data: [
        ...this.state.data.slice(0, i),
        Object.assign({}, this.state.data[i], { quantity: item.quantity + qty, }),
        ...this.state.data.slice(i + 1),
      ],
    });
  };

  render() {

    const items = this.state.data.map((item, index) => (
      <Item qty={item.quantity} index={index} key={index} increment={this.handleIncrement} title={item.name} image={item.imageS} />
    ))
    return (
      <div>
        {items}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
</script>