#Working with atom as arrays

Works only if the atom's default value is array >

We can get use of the following methods to make our life easier.

• Add Item add new item to the atom's array.
• Remove Item Remove item from the atom's array.
• Remove Items Remove items from the atom's array.
• Replace Item Update item'value in the atom's array.
• Get Item Get item from the atom's array.
• Get Item Index Get item' index from the atom's array.
• Items Map Map over the atom's array items and replace it with a new one.
• Items length Get the length of the atom's array.

#Add Item to the array

atom.addItem(item: any) => void

This method will allow you adding item to the array, it will also trigger the change event.

const todoListAtom = atom({
  key: "todo",
  default: [],
});

// SomeComponent.tsx
export function TodoList() {
  const items = todoListAtom.useValue();

  const addNewItem = () =>
    todoListAtom.addItem({
      title: "My first task",
      id: 213,
    }); // this will update the items and re-render the component again.

  return (
    <>
      Total Items: {items.length}
      <button onClick={addNewItem}>Add Item</button>
    </>
  );
}

#Remove Item

atom.removeItem(index: number | (item: any, index: number) => number) => void

To remove an item from the atom's array we can use the removeItem method.

const todoListAtom = atom({
  key: "todo",
  default: [],
});

// SomeComponent.tsx
export function TodoList() {
  const items = todoListAtom.useValue();

  const addNewItem = () =>
    todoListAtom.addItem({
      title: "My first task",
      id: 213,
    }); // this will update the items and re-render the component again.

  return (
    <>
      Total Items: {items.length}
      <button onClick={addNewItem}>Add Item</button>
      {items.map((item, index) => (
        <div key={index}>
          <div>Title: {item.title}</div>
          <button onClick={() => todoListAtom.removeItem(index)}>Remove</button>
        </div>
      ))}
    </>
  );
}

This will remove the item by the given index.

It can also be removed by passing a callback to remove the item from the list.

todoListAtom.removeItem((item) => item.id > 100);

Please note this will only remove the first matched item. >

To remove multiple items, use removeItems method instead.

#Remove Items

atom.removeItem(indexes: number[] | (item: any, index: number) => number) => void

Works exactly like removeItem except that it accepts an array of indexes or a callback function to remove multiple items.

todoListAtom.removeItems([0, 2, 3]); // will remove index 0, 2 and 3

// OR

todoListAtom.remoteItems((item) => item.id > 1);

#Replace Item

atom.replaceItem(index: number, newItemValue: any) => void

Updates item's value by for the given index

const index = 2;
todoListAtom.replaceItem(2, {
  title: "New Title",
});

#Get Item

atom.getItem(indexOrCallback: number | ((item: any, index: number) => any)) => any

Get an item from the array using item index or callback function.

const index = 2;

const item = todoListAtom.getItem(index);

// Or
const itemId = 15111; // dummy id
const otherItem = todoListAtom.getItem((item) => item.id === itemId);

#Get Item Index

atom.getItemIndex(callback: (item: any, index: number, array: any[]) => any) => any

Get the index of the first matched element to the given callback.

const itemId = 15111; // dummy id
const itemIndex = todoListAtom.getItemIndex((item) => item.id === itemId); // 2 for example

#Atom map

atom.map(callback: (item: any, index: number, array: any[]) => any) => any

Walk over every item in the array and update it, this will trigger the change event.

const numbersAtom = atom({
  key: "number",
  default: [1, 2, 3, 4],
});

// multiple the atom's array numbers by 2
numbersAtom.map((number) => number * 2);

console.log(numbersAtom.value); // [2, 4, 6, 8];

#Get Atom length

This can be useful feature when working with arrays or strings, atom.length returns the count of total elements/characters of the atom's current value.

const todoListAtom = atom({
  key: "todo",
  default: [],
});

console.log(todoListAtom.length); // 0

todoListAtom.addItem({
  title: "My first task",
  id: 213,
});

console.log(todoListAtom.length); // 1

Wait for more, to be continued !