Как вывести карточки циклом?

Question

[Дмитрий Марков]

Получаю массив users , есть компонент карточка , но не могу понять как вывести карточки в цикле users)

import React, { Component } from 'react';

// components
import Container from '../components/container/container';
import Card from '../components/users-card/Card';

// js
import makeRequest from '../components/js/make-request';

export default class Home extends Component {
    constructor(props) {
        super(props);
        this.userCards = []
        this.request = {
            'url'   : 'api/users.json',
            'method': 'GET'
        }

        this.collectionCards();
    }

    async collectionCards() {
        let json = await makeRequest(this.request.method, this.request.url, {}, true);
        let resp = JSON.parse(json);


        for (let [key, value] of Object.entries(resp)) {
            await this.userCards.push(value)
        }
    }

    render() {
        return (
            <>
                <section>
                    <Container class="container">
                        <h2>Home</h2>
                        <div className="user-cards-wrapper">
                            <Card /> // <-- тут нужен цикл, как его сюда запихать?
                        </div>
                    </Container>
                </section>
            </>
        );
    }
}

Подскажите чё нить

Answer 1

[0xD34F]

Знаю, но не скажу. Читайте документацию.

Answer 2

[lazuren]

...
render() {
        return (
            <>
                <section>
                    <Container class="container">
                        <h2>Home</h2>
                        <div className="user-cards-wrapper">
                            {this.userCards.map(user => (
                                  <Card user={user} />
                              )}
                        </div>
                    </Container>
                </section>
            </>
        );
    }
...

Comments

[Дмитрий Марков]

Я так же сделал , но что то не работает...

{this.userCards.map((user) =>
                                <Card params={user} />
                            )}

[lazuren]

Может быть у вас userCards пустой?

[Дмитрий Марков]

О, вышло))) я понял , сначала создаём состояние
this.state = { usersCards: [], }
а потом когда мы его изменяем через
this.setState({ usersCards: resp })
У нас повторно вызывается render

[Дмитрий Марков]

Да, userCards пустой был