Реагировать на цикл через вызовы API

Question

Я извлекаю данные из API с помощью реакции и отображаю их в контейнере bootstrap. Я пытаюсь реализовать карту реагирования, чтобы перебрать каждую запись в базе данных.

import React from 'react';
import "./Home.css";
import Icon from "./../Images/icon.png";
import Popup from "./Popup";

export default class GetFullName extends React.Component {

    constructor(props) {
        super(props);
        this.state = { showPopup: false };
    }

    togglePopup() {
        this.setState({
            showPopup: !this.state.showPopup
        });
    }

    state = {
        firstName: null,
        lastName: null,
        fullName: null,
        jobRole: null,
        about: null,

    }

    async componentDidMount() {
        const url = "https://localhost:44362/api/peopleprofiles";
        const response = await fetch(url);
        const data = await response.json();
        this.setState({ firstName: data[0].firstName })
        this.setState({ lastName: data[0].lastName })
        this.setState({ fullName: this.state.firstName + " " + this.state.lastName })
        this.setState({ jobRole: data[0].roleType.jobRole })
        this.setState({ about: data[0].about })
        this.setState({ image: window.btoa(data[0].iconNavigation.image) })
        this.setState({ image: "data:image/jpeg;charset=utf-8;base64, " + window.btoa(data[0].iconNavigation.image) + "" })
        console.log(data)
    }


    render() {
        return (
                <div className="container PeopleProfile">
                    <div className="row flex-grow">
                        <div className="col-2">
                        <img src={this.state.image} className="Icon" alt="ProfileIcon" />
                        //<img src={Icon} className="Icon" alt="ProfileIcon" />
                        </div>  
                        <div className="col-10">
                            <div className="row PeopleProfile">
                                <p id="ppName"><div>{this.state.fullName}</div></p>
                            </div>
                            <div className="row ppjobTitle">
                                <p id="ppjobTitle"><div>{this.state.jobRole}</div></p>
                            </div>
                            <div className="row PeopleProfile">
                            <p id="ppDescription"><div>{this.state.about}</div></p>
                            </div>
                                <div className="row PeopleProfile">
                                    <div className="ppButton">

                                <input type="submit" onClick={this.togglePopup.bind(this)} value="Full profile" id="PeopleProfileBTN" class="align-self-end btn btn-lg btn-block"></input>
                                    </div>
                                    <div>
                                        {this.state.showPopup ?
                                        <Popup
                                            text='Click "Close Button" to hide popup'
                                            closePopup={this.togglePopup.bind(this)}
                                            />
                                            : null
                                         }
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
        );
    }

}

Это мой текущий код. Я пытался использовать карту реакции, но не могу заставить ее работать. Кто-нибудь знает, как я могу правильно реализовать карту реагирования в этом проекте или лучший способ решить эту проблему?