Používanie props pri podmienenom renderovaní so Styled Components v Reacte
Props sa dajú použiť aj pre podmienené
renderovanie. Zoberme si React komponent
Block, s ktorým sme pracovali na
predchádzajúcej lekcii.
Urobme to tak, aby bol pre prvý input
pozadie žlté a pre ostatné inputs
zelené. Preto do štýlov pre komponent
Input pridajme ešte jeden riadok a vyjde nám:
const Input = styled.input`
background: ${(props) => (props.first ? 'yellow' : 'green')};
margin: 5px;
font-size: 18px;
`;
Pridajme prop first
prvému inputu:
<Container>
<Input first />
<Input placeholder="name" type="text" />
<Input type="password" />
</Container>
Použitím podmieneného renderovania, uvedeného
v teórii lekcie, upravte kód riešenia
úlohy z predchádzajúcej lekcie tak, aby pri
prítomnosti propu warn bol text tlačidla
červený a jeho pozadie bolo žlté, a bez
neho - zelené pozadie a biely text.
Odovzdajte warn druhému tlačidlu.
