Task 3: Update App.jsx

In this step, you will create the following:

  1. A variable to manage the state of our project
  2. A variable to hold the unique values of the orbitType property of the satellite objects
  3. A function that will filter through the satellites.

These variables and this function will be used by the Buttons and Table components.

Inside the App.jsx file

Open the App.jsx file.

  1. Import useState from "react".

  2. Import satData.jsx as satData.

  3. Inside the App() function create the first variable.

    7
8
9

    function App() {
   const [sat, setSat] = useState(satData);
   // code continues ...

    This array holds two variables: sat and setSat. sat will be used to compare changes in state. setSat is a function that will be used to update the state. We set this array equal to the useState function. useState is passed satData. You will use these in the other components.

  4. Next, create the second variable, called displaySats.

     7
 8
 9
10

    function App() {
   const [sat, setSat] = useState(satData);
   const displaySats = [...new Set(satData.map((data) => data.orbitType))];
   // code continues ...

    This variable will use the Set method to create a new array that holds unique elements. This function will be used to create the buttons, so we want to pull out the orbitType values of each object inside satData. The Set method prevents duplicate elements. We are using it because there are only three types of orbitTypes: Low, Medium, and High. This will eventually create three buttons. If we only used map, we would create 10 buttons, and many of them would be duplicates.

  5. Next, create an arrow function called filterByType.

    1. This function will take a parameter that you can call currentType.
    2. Inside this function, you will update the displaySats variable using the filter method .
      1. filter is similar to map, in that it will iterate through a collection until it finds the desired element.
    3. filter requires a callback, call the callback newSatDisplay.
    4. The filter function will return the newSatDisplay.orbitType that is equal to currentType.
    5. Close the filter function’s return statement.
    6. Before closing the arrow function, we want to update setSat by passing it the newly updated displaySats.
    11
12
13
14
15
16

    const filterByType = (currentType) => {
   const displaySats = satData.filter((newSatDisplay) => {
      return newSatDisplay.orbitType === currentType;
   });
   setSat(displaySats);
};

  6. Before we leave the App() function, we need to provide props for the Buttons and Table components.

    11
12
13
14
15
16
17
18
19

     <>
   <Banner />
   <Buttons
     filterByType={filterByType}
     setSat={setSat}
     displaySats={displaySats}
   />
   <Table sat={sat} />
 </>

Next