Použití props při podmíněném renderování se Styled Components v Reactu
Props lze použít i pro podmíněné
renderování. Vezměme React komponentu
Block, se kterou jsme pracovali v
předchozí lekci.
Uděláme to tak, aby pozadí pro první
input bylo žluté a pro ostatní inputy
zelené. K tomu přidáme do stylů pro komponentu
Input ještě jeden řádek a vyjde:
const Input = styled.input`
background: ${(props) => (props.first ? 'yellow' : 'green')};
margin: 5px;
font-size: 18px;
`;
Přidáme prop first
prvnímu inputu:
<Container>
<Input first />
<Input placeholder="name" type="text" />
<Input type="password" />
</Container>
Pomocí podmíněného renderování uvedeného
v teorii lekce upravte kód řešení
úkolu z předchozí lekce tak, aby při
přítomnosti propu warn byl text tlačítka
červený a jeho pozadí žluté, a bez
něj - zelené pozadí a bílý text.
Předajte warn druhému tlačítku.
