A prop-ok használata feltételes renderelésben Styled Components segítségével Reactben

A prop-ok feltételes renderelésre is használhatók. Vegyük a React komponenst Block, amellyel az előző leckében dolgoztunk.

Tegyük úgy, hogy az első input mező háttérszíne sárga legyen, a többi input mezőé pedig zöld. Ehhez a Input komponens stílusdefiníciójához adjunk hozzá még egy sort, így kapjuk:

Block.jsconst Input = styled.input`
  background: ${(props) => (props.first ? 'yellow' : 'green')};

  margin: 5px;
  font-size: 18px;
`;

Adjunk hozzá first prop-ot az első input mezőhöz:

Block.js<Container>
  <Input first />
  <Input placeholder="name" type="text" />
  <Input type="password" />
</Container>

Задание 1

A lecke elméleti részében bemutatott feltételes renderelést használva módosítsa az előző lecke feladatának megoldási kódját úgy, hogy ha a warn prop meg van adva, akkor a gomb szövege piros legyen és a háttere sárga, ha nincs megadva, akkor pedig zöld legyen a háttér és fehér a szöveg. Adja meg a warn prop-ot a második gombnak.