Project 10: Real Estate Card

React Engineer

Builds on these lessons

Higher Order Components Component Composition Styling

Step 1 of 3

Project

A Higher-Order Component

Write withLoadingState(Component), a function that takes a component and returns a new one adding a loading check before rendering it. An HOC wraps a component to add shared behavior — the function-based ancestor of what custom hooks now do more simply in most cases.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

function withLoadingState(Component) {
  return function WithLoadingState({ isLoading, ...props }) {
    if (isLoading) return <p>Loading...</p>;
    return <Component {...props} />;
  };
}

function PropertyCard({ address }) {
  return <h2>{address}</h2>;
}

const PropertyCardWithLoading = withLoadingState(PropertyCard);

export default function RealEstateCard() {
  return <PropertyCardWithLoading isLoading={false} address="142 Maple Street" />;
}

← Previous Next →