App.jsx

/* eslint-disable react/prefer-stateless-function */
import { Component } from 'react';
import './App.css';
import User from './User';

const apiUrl = 'https://reqres.in/api';
class App extends Component {
  constructor() {
    super();
    this.state = {
      users: [],
    };
  }

  componentDidMount() {
    fetch(`${apiUrl}/users`)
      .then((res) => res.json())
      .then((res) => {
        this.setState({
          users: res.data,
        });
      });
  }

  render() {
    const { users } = this.state;
    return (
      <main className="container">
        <div className="item">
          {users.map((user) => {
            return (
              <User
                key={user.id}
                firstName={user.first_name}
                lastName={user.last_name}
                email={user.email}
                avatar={user.avatar}
              />
            );
          })}
        </div>
      </main>
    );
  }
}

export default App;

User.jsx

import PropTypes from 'prop-types';

function User({ firstName, lastName, email, avatar }) {
  return (
    <div>
      <h1>
        {firstName} {lastName}
      </h1>
      <h2>{email}</h2>
      <img src={avatar} alt={lastName} />
    </div>
  );
}

User.propTypes = {
  firstName: PropTypes.string.isRequired,
  lastName: PropTypes.string.isRequired,
  email: PropTypes.string.isRequired,
  avatar: PropTypes.string.isRequired,
};

export default User;