How to update arrays in state using React JS 🍎

In React JS, updating arrays in state involves manipulating the state in a way that is immutable, meaning that the original state object is not modified but rather a new state object is created with the updated array.

Let’s go through a step-by-step tutorial on how to update arrays in state in React JS:

Step 1: Set up a React component
First, create a new React component using the class syntax or functional component if you are using hooks. For this tutorial, I will be using the class component syntax.

import React, { Component } from 'react';

class ArrayUpdateComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: ['apple', 'banana', 'cherry'],
    };
  }

  render() {
    return (
      <div>
        {this.state.items.map(item => <div key={item}>{item}</div>)}
      </div>
    );
  }
}

export default ArrayUpdateComponent;

Step 2: Update the array in state
To update the array in state, you can use the setState method provided by React. Usually, you will want to update the array based on some user input or event. Let’s say we want to add a new item to the array when a button is clicked:

class ArrayUpdateComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: ['apple', 'banana', 'cherry'],
    };
  }

  addItem = () => {
    this.setState(prevState => ({
      items: [...prevState.items, 'date'],
    }));
  };

  render() {
    return (
      <div>
        {this.state.items.map(item => <div key={item}>{item}</div>)}
        <button onClick={this.addItem}>Add Item</button>
      </div>
    );
  }
}

In the addItem method, we use the spread operator ... to create a new array with all the elements from prevState.items and add a new item, in this case, ‘date’.

Step 3: Update specific item in the array
If you want to update a specific item in the array, you can use the map method to iterate over the array and update the desired item based on its index. Let’s say we want to update the second item in the array:

class ArrayUpdateComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: ['apple', 'banana', 'cherry'],
    };
  }

  updateItem = () => {
    this.setState(prevState => ({
      items: prevState.items.map((item, index) => {
        if (index === 1) {
          return 'grape';
        }
        return item;
      }),
    }));
  };

  render() {
    return (
      <div>
        {this.state.items.map(item => <div key={item}>{item}</div>)}
        <button onClick={this.updateItem}>Update Item</button>
      </div>
    );
  }
}

In the updateItem method, we use the map method to iterate over the array and check if the current index is equal to 1 (i.e., the second item in the array), then return ‘grape’ as the updated item. Otherwise, we return the original item.

Conclusion:
In this tutorial, we learned how to update arrays in state in React JS in an immutable way using the setState method. By following these steps, you can easily manage and update arrays in state within your React components.