Penggunaan Props dalam Conditional Rendering dengan Styled Components di React

Props juga dapat digunakan untuk conditional rendering. Mari kita ambil komponen React Block yang telah kita gunakan pada pelajaran sebelumnya.

Mari kita buat agar latar belakang untuk input pertama berwarna kuning, dan untuk input lainnya berwarna hijau. Untuk melakukan ini, tambahkan baris lagi pada gaya untuk komponen Input dan hasilnya akan menjadi:

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

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

Tambahkan prop first pada input pertama:

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

Dengan menggunakan conditional rendering yang diberikan dalam teori pelajaran, modifikasi kode solusi untuk pelajaran sebelumnya sehingga ketika prop warn ada, teks tombol menjadi merah dan latar belakangnya kuning, dan tanpa prop tersebut - latar belakang hijau dan teks putih. Berikan warn pada tombol kedua.