# loading
import React, { useState } from "react";
import { people } from "./people";
export const Loading = () => {
  const loadMore = () => {
    setNumberOfPeople(val => val + 5);
  };
  const [numberOfPeople, setNumberOfPeople] = useState(5);
  return (
    <div>
      {people
        .slice(0, numberOfPeople)
        .map(({ name, email, city, mac, timestamp, creditcard }) => (
          <ul>
            <ul>
              <li>{name}</li>
              <li>{email}</li>
              <li>{city}</li>
              <li>{mac}</li>
              <li>{timestamp}</li>
              <li>{creditcard}</li>
            </ul>
          </ul>
        ))}
      <button onClick={loadMore}>we</button>
    </div>
  );
};