A code sample for React Hooks

CustomerListByGender.js

import React, { useEffect, useState } from "react";

function CustomersWithGender({ gender }) {
  const [customers, setCustomers] = useState([]);

  useEffect(
    async () => {
      const res = await fetch(`https://upoint.store.back.au/api/customers?gender=${gender}`);
      const json = await res.json();
      setCustomers(json.results);
    },
    [gender]
  );

  return (
    <div class="customer-list">
      { customers.map(customer => (
        <div class="customer" key={customer.id}>
          {`The person name is: ${customer.name.title} ${customer.name.first} ${customer.name.last}`}
        </div>
      }
    </div>
  );
}

export function CustomerListByGender() {
  const [gender, setGender] = useState("female");

  return (
    <div>
      <p>Select Gender</p>
      <button onClick={() => setGender("male")}>Male</button>
      <button onClick={() => setGender("female")}>Female</button>
      <CustomersWithGender gender={gender} />
    </div>
  );
}