Task

Create a reusable StatusCard component that displays different messages based on the online prop.

The StatusCard component must include:

1. A heading (h2 element). Its text content must display the name prop.

2. A paragraph (p element).

   • If the online prop is true, display Online;
   • Otherwise, display Offline.

The App component already renders multiple StatusCard components with different props.

Starter Code

Open the starter project below and complete the missing parts of the component.

Starter code

Solution

You can compare your result with the final solution below.

Solution code