Пропсларни Reactда Styled Components билан шартли рендерингда ишлатиш

Пропсларни шартли рендеринг учун ҳам ишлатиш мумкин. Олдинги дарслиқда ишлаган Block React компонентини оламиз.

Биринчи инпут учун фонни сариқ, қолган инпутлар учун esa яшил қиламиз. Бунинг учун, 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 пропсини иккинчи тугмага ўтқазинг.