Properties

In this component, you'll take advantage of React's useEffect() hook and Axios to bring in property listings from the API and render <PropertyCard /> components for each one.

To complete this challenge, you will need to:

• Your <Properties /> component will be stateful.
• Set initial state of properties to an empty array.
• Add a useEffect() hook method to the component.
• Inside the useEffect() hook, make an Axios GET request to the API endpoint responsible for retrieving PropertyListings.
• When the Axios Promise resolves, destructure the data object from the response object and set your properties state to the data object.
• Use a hook to initialise state for alert and set it to {message: ""}
• If the Axios Promise rejects, set the message in alert state to a useful error message.
• Inside the render() method, map over the properties state, and pass each each key/value pair from each property listing to the <PropertyCard /> component as props (you should now be able to see any properties you've added).
• Render an <Alert /> with the message you stored in state (you can test this by killing your API process).
• Style your component (you might need to wrap each <PropertyCard /> component in div tags) so that <PropertyCards /> display in a grid.

Recommended Reading

• React Blog: Update on Async Rendering
• Axios Documentation
• Destructuring Function Arguments
• Axios Example
• Destructuring Function Arguments
• Spread Attributes