React_contact.js

import React from 'react';

import './contact.css';

import contactImage from './images/person_1.jpg';

class Contact extends React.Component{

    constructor(){

        super();

        this.state = { 

          contacts: [],

          contactImg:contactImage

        }

      }

      componentDidMount() {

        fetch('https://jsonplaceholder.typicode.com/users')

        .then(res => res.json())

        .then((data) => {

          let contactsInc = []

          for (const [index, value] of data.entries()) {

            debugger;

            contactsInc.push({

              "image":this.state.contactImg,

              "name":value.name,

              "company":value.company.name,

              "catchPhrase":value.company.catchPhrase

            });

          }

          this.setState({ contacts: contactsInc });

          console.log(this.state.contacts);

        })

        .catch(console.log);

        

      }

    render(){

        return (

           <div className="container-fluid">

            <section className="site-section border-bottom" id="team-section">

              <div className="container">

                  <div className="row mb-5">

                    <div className="col-12 text-center">

                      <h3 className="section-sub-title">Team</h3>

                      <h2 className="section-title mb-3">Our Team</h2>

                    </div>

                  </div> 

                  <div className="row">

                  {this.state.contacts.map((contact)=>(

                    <div className="col-md-6 col-lg-4 mb-5 mb-lg-0 aos-init aos-animate" data-aos="fade" data-aos-delay="100">

                        <div className="person text-center">

                          <img src={contact.image} alt="Image" className="img-fluid rounded-circle w-50 mb-5"/>

                          <h3>{contact.name}</h3>

                          <p className="position text-muted">{contact.company}</p>

                          <p className="mb-4">{contact.catchPhrase}</p>

                          <ul className="ul-social-circle">

                            <li><a href="#"><span className="icon-facebook"></span></a></li>

                            <li><a href="#"><span className="icon-twitter"></span></a></li>

                            <li><a href="#"><span className="icon-linkedin"></span></a></li>

                            <li><a href="#"><span className="icon-instagram"></span></a></li>

                          </ul>

                        </div>

                      </div>

                    ))}

                  </div>

                 </div>               

              </section>

           </div>

        )

    }

}

export default Contact;