Schleifen

Einfaches Beispiel

Wenn man bestimmte Arrays oder sonstige Sequenz-Strukturen durchlaufen möchte, kann man in JSX direkt diese Listen-Objekte durchlaufen.

const ArrayExample = () => {
    const names = ['John', 'Tom', 'Henry'];

    return (
        <ul>
            {names.map(name => (
                <li>{name}</li>
            ))}
        </ul>
    );
};

export default ArrayExample;

Die Elemente werden klassisch im Browser als gerendert.

Schleifen und Schlüssel (Key)

Wenn man beim vorherigen Beispiel in die Konsole des Browser einen Blick wirft, wird man feststellen, dass React eine Warnung generiert, die wie folgt aussieht.

const ArrayExample = () => {
    const names = ['John', 'Tom', 'Henry'];

    return (
        <ul>
            {names.map((name, idx) => (
                <li key={idx}>{name}</li>
            ))}
        </ul>
    );
};

export default ArrayExample;

Dynamische Daten und Schlüssel

Die Verwendung von Index als Schlüssel ist bei statischen Listen in Ordnung. Bei dynamischen Listen, in denen Elemente hinzugefügt werden, entfernt oder neu angeordnet werden, sollte man eindeutige IDs verwenden.

const ArrayExample = () => {
    const persons = [
        { id: 1, name: 'John' },
        { id: 2, name: 'Tom', },
        { id: 3, name: 'Henry' }
    ];

    return (
        <ul>
            {persons.map(person => (
                <li key={person.id}>{person.name}</li>
            ))}
        </ul>
    );
};

export default ArrayExample;

Wenn man Listen hat, die keine direkte Möglichkeit bieten, etwas als ein Index zu verwenden, kann man auch diese Indexe generieren. Hier soll nur lediglich darauf geachtet werden, dass diese Indexe eindeutig sind.

Im folgenden Beispiel wird die Math.random() verwendet. Die Werte, welche diese Funktion generiert, können allerdings sich wiederholen. Daher sollte man, um wirklich eindeutige Werte zu erhalten ggf. die Verwendung von Math.random() mit anderen Mittel kombinieren. In diesem Fall wird lediglich eine mögliche Verwendung gezeigt.

const ArrayExample = () => {
    const items = [100, 200, 300, 400, 500];

    return (
        <ul>
            {items.map(item => (
                <li key={Math.floor(Math.random() * 100)}>{item}</li>
            ))}
        </ul>
    );
};

export default ArrayExample;

Im obigen Beispiel generieren wir für jedes Element eine Zufallszahl zwischen 0 und 100. Wobei die generierten Werte, wie bereits angesprochen, sich wiederholen können.

Um wirklich eindeutige Werte zu erhalten, könnte man Zeitstempel mit einbeziehen.

const ArrayExample = () => {
    const items = [100, 200, 300, 400, 500];

    return (
        <ul>
            {items.map(item => (
                <li key={new Date().getTime() * (Math.random() * 10)}>{item}</li>
            ))}
        </ul>
    );
};

export default ArrayExample;

Entpacken von Eigenschaften

Wenn man über Objekte iteriert, die ein entsprechendes Set an Eigenschaften haben, muss in der Regel jede Eigenschaft des Objektes über das jeweilige Objekt angesprochen werden.

const persons = [
    { name: 'John', age: 30, job: 'Developer' },
    { name: 'Tom', age: 25, job: 'Manager' },
    { name: 'Henry', age: 34, job: 'Designer' }
];

persons.forEach(person => {
    // Name
    console.log(person.name);

    // Job
    console.log(person.job);
});

Man kann etwas an Schreibarbeit sparen, wenn man die Eigenschaften des Objektes entpackt. Im reinen JavaScript würde es folgendermaßen aussehen.

const persons = [
    { name: 'John', age: 30, job: 'Developer' },
    { name: 'Tom', age: 25, job: 'Manager' },
    { name: 'Henry', age: 34, job: 'Designer' }
];

persons.forEach(({ name, age, job }) => {
    // Name
    console.log(person.name);

    // Job
    console.log(person.job);
});

Diese Technik kann ebenfalls in React Components eingesetzt werden. Hier soll allerdings darauf geachtet werden, dass die Lesbarkeit des Codes und die Offensichtlichkeit bestimmter Kontexte nicht leidet. Wenn man ein größeres Konstrukt hat und zu Beginn der Schleife die Destruktion durchführt, weiß man weiter unten ggf. nicht immer zu welchem Objekt eine Eigenschaft gehört.

const ArrayExample = () => {
    const persons = [
        { name: 'John', age: 30, job: 'Developer' },
        { name: 'Tom', age: 25, job: 'Manager' },
        { name: 'Henry', age: 34, job: 'Designer' }
    ];

    return (
        <ul>
            {persons.map(({ name, age, job }, idx) => (
                <li key={idx}>Name: {name}<br/> Age: {age}<br/> Job: {job}</li>
            ))}
        </ul>
    );
};

export default ArrayExample;

Aufbau von Elementen innerhalb JavaScript

Es besteht auch die Möglichkeit JSX-Elemente direkt innerhalb von JavaScript aufzubauen. Gemeint ist damit, dass wir innerhalb einer Funktion, beispielsweise, problemlos Bestandteile eines Templates in JSX zusammenbauen können.

Stellen wir uns ein einfaches Component vor. Wir definieren dort eine Variable, welche ein Array ist und bestimmte Elemente aufnehmen kann.

const Sample = () => {
    const items = [];

    for (let i = 0; i < 5; i++) {
        items.push((
            <li>{i + 1}</li>
        ));
    }

    return (
        <ul>
            {items}
        </ul>
    );
};

export default Sample;

Wie man sehen kann, kriegen wir eine reguläre Ausgabe. Das Array mit li Elementen wird korrekt und automatisch entpackt.