Rendering Gitlab API object as a list

Question

I got this code, which pulls gitlab users from API.

import React from 'react'
import {PageHeader} from "antd";
import { Gitlab } from '@gitbeaker/browser';

const api = new Gitlab({
    host: 'https://sample.com',
    token: 'asda',
});

class agileMetrics extends React.Component {
    async componentDidMount(){
        const users = await api.Users.all()
        console.log(users)
    }

    render() {
        return (
            <div>
                <PageHeader
                    className="site-page-header"
                    title="Metrics"
                    subTitle="..."
                />
            </div>
        );
    }
}

export default agileMetrics;

And it works with console:

How can I display those users as a list in body of my page?

Answer 1

Place the data in state and map over the array to produce an array of elements:

mport React from 'react'
import {PageHeader} from "antd";
import { Gitlab } from '@gitbeaker/browser';

const api = new Gitlab({
    host: 'https://sample.com',
    token: 'asda',
});

class agileMetrics extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            users: []
        }
    }
    async componentDidMount(){
        const users = await api.Users.all()
        this.setState({users})
    }

    render() {
        return (
            <div>
                <PageHeader
                    className="site-page-header"
                    title="Metrics"
                    subTitle="..."
                />
                <ul>
                  {this.state.users.map(user => <li key={user.id}>{user.name}</li>)}
                </ul>
            </div>
        );
    }
}

export default agileMetrics;