Выкарыстанне пропсаў ва ўмоўным рэндэрынгу з 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 другой кнопцы.