Task 5: Update Table.jsx

In this step, you will create the following:

A table that provides the following data about the satellites:

  1. Name
  2. Type of Satellite
  3. Launch Date
  4. Status

Comments have been provided to help structure the table. You can keep them or remove them.

Inside the Table.jsx component:

  1. Notice that the Table function starts with the sat prop provided.
  2. Start by updating the table header. It needs a total of four <th> tags. They need to hold text for the following data points: Name, Type of Satellite, Launch Date, and Status.
  3. The body of the table will use the map function to render the data based on which button a user selects.
  4. Iterate through the sat prop using map; use the following callbacks: id and data.
    1. The map function will return data to each row in the table.
    2. The <tr> tag in the table body needs a key. Set the key equal to the id.
    3. Create a total of four <td> tags.
      1. Use dot notation to assign the correct object key. The code below would render the name of a satellite.
      <td>{data.name}</td>
      1. The value for each <td> tag needs to correspond to the <th> tags. This means that we want names of satellites to be rendered in a column of names.
  5. For the Status, create a conditional that will tell a user if a satellite is active or inactive based on its operational value.

Status Check

You should have a Banner, four buttons, and a table. When you click on a button, satellites with the selected orbit type should be rendered.

Great job! You are ready for the next steps.

Step 6 contains optional styling features. You can skip this step, if you would like.

Step 7 contains information for running the auto-grading tests. You will need to do step 7.