Propsien käyttö ehdollisessa renderöinnissä Styled Componentsin kanssa Reactissa

Propsseja voidaan käyttää myös ehdolliseen renderöintiin. Otetaan React-komponentti Block, jota käytimme edellisellä oppitunnilla.

Tehdään niin, että tausta ensimmäiselle inputille on keltainen ja muille inputeille vihreä. Tätä varten lisäämme tyyleihin komponentille Input vielä yhden rivin, jolloin saamme:

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

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

Lisätään props first ensimmäiselle inputille:

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

Käyttämällä oppitunnin teoriassa esiteltyä ehdollista renderöintiä, muokkaa edellisen oppitunnin tehtävän ratkaisun koodia niin, että kun props warn on läsnä, napin teksti on punainen ja sen tausta on keltainen, ja ilman sitä - vihreä tausta ja valkoinen teksti. Välitä warn toiselle napille.