Task 4: Update Buttons.jsx

In this step, you will create the following:

  1. Four clickable buttons
    1. Three of them will use the props you passed from the App() function
    2. One will display all of the satellites

Inside the Buttons.jsx component:

  1. Import the satData as satData.
  2. Pass the props created from the App() function: filterByType, setSat, and displaySats.
  3. Update the first button:

    1. This function needs to return a <div> that used the map function to iterate over the displaySats variable.

      1. Provide two callbacks for the map function: id and sat.
      2. The map function will return the first <button>.
      3. Inside the <button> tag create the following:
        1. An onClick method that points to filterByType() function.
        2. Set the key equal to id.
      4. Between the <button> tags, replace "Placeholder Button" with {sat} Orbit.
       7
 8
 9
10
11
12
13
14

      {displaySats.map((sat, id) => {
  return (
    <button onClick={() => filterByType(sat)} key={id}>
      {sat} Orbit
    </button>
  );
})}
//code continues
  4. Update the second button:
    1. This button needs to be outside of the map function.
    2. Inside the <button> tag, create an onClick function that points to setSat. Pass satData to setSat.

Next