Коришћење пропса у условном рендеровању са Styled Components у React-у

Пропсе се може користити и за условно рендеровање. Узмимо React компонент Block, са којим смо радили у претходном уроку.

Учинимо тако да нам позадина за први инпут буде жута, а за остале инпуте зелена. За то, у стилове за компонент Input додајмо још један ред и добићемо:

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

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

Додајмо пропс first првом инпуту:

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

Користећи условно рендеровање, наведено у теорији урока, модификујте код решења задатка из претходног урока тако да при присуству пропса warn текст дугмета буде црвен и његова позадина жута, а без њега - зелена позадина и бели текст. Проследите warn другом дугмету.