React - Array als Komponentenzustand

In diesem Artikel wird gezeigt, wie man Arrays als Zustand in React verwenden und dann einige Elemente, basierend auf diesem Array, rendern. 

Die häufigsten Probleme für Anfänger in React beim Versuch, Arrays zu verwenden, sind:

• kein eindeutiger Schlüssel für jedes Element im Array,
• das Array ändern und den Zustand der Komponente nach der Änderung aktualisieren.

In diesem Artikel werden 4 grundlegende Operationen auf Arrays gezeigt:

1. Elemente auf der Basis von Array-Elementen zu rendern,
2. Elemente hinzufügen, 
3. Elemente zu löschen,
4. Elemente zu modifizieren.

Hinweis: die folgenden Lösungen sind eine Zusammenfassung der meist verwendeten Praktiken.

1. Rendern von Elementen auf Basis von Array-Elementen - Beispiel

Es ist sehr wichtig, dass jedes Element seinen eigenen, eindeutigen Schlüssel hat - das ermöglicht eine optimale Erkennung von Änderungen im DOM-Baum. Um durch das Array zu iterieren, kann man die in JavaScript integrierte Funktion map() verwenden.

// ONLINE-RUNNER:browser;
// import React from "react";
// import ReactDOM from "react-dom";

const App = () => {
  const [list, setList] = React.useState(['eins', 'zwei', 'drei']);
  return (
    <ul>
      {list.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

2. Hinzufügen von Elementen in einem Array - Beispiel 

Um React über eine Zustandsänderung zu informieren, muss man eine andere Referenz als die aktuell an den Zustand übergeben. So kann man dank der Operation [...list, newItem], die ein neues Objekt mit denselben Elementen zurückgibt, ein Element zum Array hinzufügen.

// ONLINE-RUNNER:browser;

// import React from "react";
// import ReactDOM from "react-dom";

const App = () => {
  const [list, setList] = React.useState(['eins', 'zwei', 'drei']);
  const handleAddClick = () => {
    const number = list.length + 1;
    setList([...list, 'hinzugefügt' + number]);
  };
  return (
    <div>
      <ul>
        {list.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={handleAddClick}>Element hinzufügen</button>
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Hinweis: Bei der Verwendung der Methode list.push() kann man keine Änderung an der Komponente sehen, weil die als Status gespeicherte Referenz nicht geändert wird - die Komponente wird nur neu gerendert, wenn die Referenz oder der Wert im Status geändert wird. 

3. Löschen von Elementen aus einem Array - Beispiel 

Eine der einfachsten Vorgehensweise, um Elemente aus einem Array zu entfernen und zu kopieren, ist die Verwendung der Methode filter().

// ONLINE-RUNNER:browser;

// import React from "react";
// import ReactDOM from "react-dom";

const App = () => {
  const [list, setList] = React.useState(['eins', 'zwei', 'drei']);
  const handleRemoveClick = () => {
    setList(list.filter((item, index) => item !== 'zwei'));
  };
  return (
    <div>
      <ul>
        {list.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={handleRemoveClick}>Element löschen 'zwei'</button>
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

4. Modifizieren von Elementen in einem Array - Beispiel

Mit der Methode map() kann man Elemente in ein neues Array umschreiben und nur ausgewählte Elemente darin ändern.

// ONLINE-RUNNER:browser;

// import React from "react";
// import ReactDOM from "react-dom";

const App = () => {
  const [list, setList] = React.useState(['eins', 'zwei', 'drei']);
  const handleRemoveClick = () => {
    setList(list.map((item, index) => item === 'zwei' ? 'der neue Wert im zweiten Element' : item));
  };
  return (
    <div>
      <ul>
        {list.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={handleRemoveClick}>Element löschen 'zwei'</button>
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );