How to show buttons are clicked?

[miriam-ertl]

Moin,

gerade sitze ich an der Aufgabe der People in Space React. Ich würde gern anzeigen, dass einer der drei möglich ausgewählten Buttons anzeigt, das er geklickt ist über eine Veränderung der Button-Hintergrundfarbe.

Wie wäre hier der richtige Weg bzw. Lösung?

1. Müsste ich eine Button-Komponente mit {Props} und einem "handleClick" anlegen?
2. Wie müsste ich dann die Filter dazu bringen?

Hier ein Ausschnitt aus der App.js zu dem derzeitigem Code der Buttons:
<div className="main__button-container"> <button type="button" className="main__button-single" aria-label="select all people in Space" onClick={() => setCraft("All")} > all </button> <button type="button" className="main__button-single" aria-label="select all people in Space" onClick={() => setCraft("ISS")} > iss </button> <button type="button" className="main__button-single" aria-label="select all people in Space" onClick={() => setCraft("Tiangong")} > tiangong </button> </div>

Hier liegt ein Pull-request zum aktuellen Stand: @miriam-ertl/people-in-space-react#1

[Kheirah]

Your CSS could look something like this:

.main__button-single {
  min-width: 40px;
  min-height: 20px;
  font-size: 0.5em;
  color: white;
  border-color: white;
  border-style: dotted;
}

.darkblue {
  background-color: darkblue;
}

.lightblue {
  background-color: lightblue;
}

You have a class for styling the button except for the background color. That's handled in two new separate classes.
Then, in your App.js you have this:

<button
  type="button"
  className={`main__button-single ${craft === "All" ? "darkblue" : "lightblue"}`}
  aria-label="select all people in Space"
  onClick={() => setCraft("All")}
>
  all
</button>
<button
  type="button"
  className={`main__button-single ${craft === "ISS" ? "darkblue" : "lightblue"}`}
  aria-label="select all people in Space"
  onClick={() => setCraft("ISS")}
>
  iss
</button>
<button
  type="button"
  className={`main__button-single ${craft === "Tiangong" ? "darkblue" : "lightblue"}`}
  aria-label="select all people in Space"
  onClick={() => setCraft("Tiangong")}
>
  tiangong
</button>

where you use string interpolation to toggle between the classes depending on the current state of craft.