Използване на пропси в условен рендъринг със Styled Components в React

Пропсите могат да се използват и за условен рендъринг. Да вземем React компонента Block, с който работихме в предишния урок.

Нека направим така, че фонът за първото входно поле да е жълт, а за другите входни полета зелен. За това, в стиловете за компонента Input ще добавим още един ред и ще стане:

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

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

Добавяме пропса first на първото входно поле:

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

Задание 1

Използвайки условния рендъринг, представен в теорията на урока, модифицирайте кода на решението за задачата от предишния урок така, че при наличие на пропса warn текстът на бутона да бъде червен и фонът му да е жълт, а без него - зелен фон и бял текст. Подайте warn на втория бутон.