How to withdraw cards in a cycle?

Question

React

I get the users array, there is a card component, but I can’t figure out how to display cards in the users loop)

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>
            </>
        );
    }
}

Tell me what thread

Answer 1

I know, but I won't tell. Read the documentation .

Answer 2

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