Korišćenje prosledjenih podataka u uslovnom renderovanju sa Styled Components u Reactu

Prosledjeni podaci se mogu koristiti i za uslovno renderovanje. Uzmimo React komponentu Block, sa kojom smo radili u prethodnoj lekciji.

Učinimo da pozadina za prvi ulaz bude žuta, a za druge ulaze zelena. Za ovo, u stilove za komponentu Input dodajmo još jedan red i dobićemo:

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

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

Dodajmo prosleđeni podatak first prvom ulazu:

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

Koristeći uslovno renderovanje, prikazano u teoriji ove lekcije, modifikujte kod rešenja zadatka iz prethodne lekcije tako da, ukoliko postoji prosleđeni podatak warn, tekst dugmeta bude crven, a njegova pozadina žuta, a bez njega - zelena pozadina i beli tekst. Prosledite warn drugom dugmetu.