Task 5: Update Table.jsx
In this step, you will create the following:
A table that provides the following data about the satellites:
- Type of Satellite
- Launch Date
Comments have been provided to help structure the table. You can keep them or remove them.
- Notice that the
Tablefunction starts with the
- 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.
- The body of the table will use the
mapfunction to render the data based on which button a user selects.
- Iterate through the
map; use the following callbacks:
mapfunction will return data to each row in the table.
<tr>tag in the table body needs a
key. Set the
keyequal to the
- Create a total of four
- Use dot notation to assign the correct object key. The code below would render the name of a satellite.
- 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.
- For the
Status, create a conditional that will tell a user if a satellite is active or inactive based on its
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.