Styled Components ile React'ta Koşullu Render İşleminde Prop Kullanımı
Prop'lar koşullu render işlemleri için de kullanılabilir.
Bir önceki derste üzerinde çalıştığımız React bileşeni
Block'ü ele alalım.
İlk input için arka plan rengini sarı, diğer input'lar
için yeşil yapalım. Bunun için, Input bileşeninin
stillerine bir satır daha ekleyeceğiz ve şu şekilde olacak:
const Input = styled.input`
background: ${(props) => (props.first ? 'yellow' : 'green')};
margin: 5px;
font-size: 18px;
`;
İlk input'a first prop'unu
ekleyelim:
<Container>
<Input first />
<Input placeholder="name" type="text" />
<Input type="password" />
</Container>
Ders teorisinde verilen koşullu render işlemini kullanarak,
önceki dersin problem çözüm kodunu, warn prop'u
varlığında buton metninin kırmızı ve arka planının sarı,
olmadığında ise yeşil arka plan ve beyaz metin olacak şekilde
değiştirin.
warn prop'unu ikinci butona iletin.
