Wykorzystanie props w renderowaniu warunkowym ze Styled Components w React
Props można wykorzystywać również do warunkowego
renderowania. Weźmy komponent React
Block, z którym pracowaliśmy na
poprzedniej lekcji.
Sprawmy, aby tło dla pierwszego
inputa było żółte, a dla innych inputów
zielone. W tym celu, do stylów dla komponentu
Input dodajmy jeszcze linijkę i otrzymamy:
const Input = styled.input`
background: ${(props) => (props.first ? 'yellow' : 'green')};
margin: 5px;
font-size: 18px;
`;
Dodajmy prop first
pierwszemu inputowi:
<Container>
<Input first />
<Input placeholder="name" type="text" />
<Input type="password" />
</Container>
Wykorzystując renderowanie warunkowe, podane
w teorii lekcji, zmodyfikuj kod rozwiązania
zadania z poprzedniej lekcji tak, aby przy
obecności propsu warn tekst przycisku był
czerwony, a jego tło żółte, a bez
niego - zielone tło i biały tekst.
Przekaż warn drugiemu przyciskowi.
