Logo

Wyświetlanie ładowania zamiast listy

git checkout 18-display-loading -f

Fajnie byłoby wyświetlić stan ładowania w sposób warunkowy tj.

  • jeśli loading=true wyświetlmy napis "Trwa ładowanie"
  • jeśli loading=false wyświetlamy listę produktów

Ternary operator - wyrażenie trójkowe

Ternary operator jest używany w sytuacji gdy chcemy zwrocić jedno z dwóch opcji

warunek ? to zwróce jeśli prawda : to zwróce jeśli fałsz

Przykład

const number = 3;

return number === 1 ? 'is one' : 'not one';

Pozwala nam na uniknięcie dużej ilości małych ifów, które w powyższym przykładzie wymusiłyby na nas

const number = 3;
if (number === 1) {
  return 'is one';
} else {
  return 'not one';
}

Możemy zwracać też tak komponenty w funkcji render

render() {
    const { loading } = this.state;
    return loading ? (
      <div>Ładuje się...</div>
    ) : (
      <div>
        // lista użytkowników
      </div>
    );
  }