Bardzo ważne jest to, aby każdy element miał swój unikalny klucz - umożliwia to optymalne wykrywanie zmian w drzewie DOM. Do iteracji po tablicy możemy użyć funkcji map() wbudowanej w JavaScript .

xxxxxxxxxx
 
// import React from "react";
// import ReactDOM from "react-dom";
​
const App = () => {
  const [list, setList] = React.useState(['jeden', 'dwa', 'trzy']);
  return (
    <ul>
      {list.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
};
​
const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Auto running

2. Dodawanie elementów do tablicy - przykład

Edit

Aby powiadomić Reacta o zmianie stanu, musimy przekazać do stanu referencję inną niż aktualna. To sprawia, że możemy dodać element do tablicy dzięki operacji [...list, newItem], która zwracająca nowy obiekt z tymi samymi elementami).

xxxxxxxxxx
 
// import React from "react";
// import ReactDOM from "react-dom";
​
const App = () => {
  const [list, setList] = React.useState(['jeden', 'dwa', 'trzy']);
  const handleAddClick = () => {
    const number = list.length + 1;
    setList([...list, 'dodano ' + number]);
  };
  return (
    <div>
      <ul>
        {list.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={handleAddClick}>Dodaj element</button>
    </div>
  );
};
​
const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Auto running

Pamiętaj: używając metody list.push() nie zobaczymy żadnej zmiany komponentu, ponieważ referencja przechowywana jako stan nie zostanie zmieniona - komponent jest ponownie renderowany tylko po zmianie referencji lub wartości w stanie.

3. Usuwanie elementów z tablicy - przykład

Edit

Jednym z najprostszych sposobów usunięcia elementów z tablicy i skopiowania ich jest użycie metody filter().

xxxxxxxxxx
 
// import React from "react";
// import ReactDOM from "react-dom";
​
const App = () => {
  const [list, setList] = React.useState(['jeden', 'dwa', 'trzy']);
  const handleRemoveClick = () => {
    setList(list.filter((item, index) => item !== 'dwa'));
  };
  return (
    <div>
      <ul>
        {list.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={handleRemoveClick}>Usuń element 'dwa'</button>
    </div>
  );
};
​
const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Auto running

4. Modyfikacja elementów w tablicy - przykład

Edit

Przy pomocy metody map() jesteśmy w stanie przepisać elementy do nowej tablicy i zmienić w niej tylko wybrane pozycje.

xxxxxxxxxx
 
// import React from "react";
// import ReactDOM from "react-dom";
​
const App = () => {
  const [list, setList] = React.useState(['jeden', 'dwa', 'trzy']);
  const handleRemoveClick = () => {
    setList(list.map((item, index) => item === 'dwa' ? 'nowa wartość w drugim elemencie' : item));
  };
  return (
    <div>
      <ul>
        {list.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={handleRemoveClick}>Usuń element 'dwa'</button>
    </div>
  );
};
​
const root = document.querySelector('#root');
ReactDOM.render(<App />, root );