Korišćenje prosledjenih podataka u uslovnom renderovanju sa Styled Components u Reactu

Prosledjeni podaci se mogu koristiti i za uslovno renderovanje. Uzmimo React komponentu Block, sa kojom smo radili u prethodnoj lekciji.

Učinimo da pozadina za prvi ulaz bude žuta, a za druge ulaze zelena. Za ovo, u stilove za komponentu Input dodajmo još jedan red i dobićemo:

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

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

Dodajmo prosleđeni podatak first prvom ulazu:

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