Penggunaan Props dengan Styled Components di React

Dari pelajaran sebelumnya, kita telah belajar bahwa komponen yang distyling menggunakan library Styled Components dapat digunakan seperti komponen React biasa. Dalam pelajaran ini, kita akan melihat bahwa props juga bekerja dengan cara yang serupa di sini.

Misalkan kita memiliki komponen React Block dan kita telah membuat komponen yang distyling menggunakan Styled Components di dalamnya, yaitu Input dan Container:

const Container = styled.div`
	display: flex;
	flex-direction: column;
	width: 150px;
`;

const Input = styled.input`
	margin: 5px;
	font-size: 18px;
`;

Mari tempatkan tiga komponen Input ke dalam Container:

function Block() {
	return (
		<Container>
			<Input />
			<Input />
			<Input />
		</Container>
	);
}

Dengan menggunakan props, kita dapat mengatur berbagai atribut dalam komponen. Mari atur atribut placeholder dan type pada input kedua dengan nilai name dan text, secara berurutan, dan pada input ketiga, atur atribut type dengan nilai password:

function Block() {
	return (
		<Container>
			<Input />
			<Input placeholder="name" type="text" />
			<Input type="password" />
		</Container>
	);
}

Buatlah komponen React kosong Block, buat sebuah div di dalamnya yang berisi tiga tombol. Dengan menggunakan library Styled Components, style div dan tombol-tombol tersebut. Menggunakan props, nonaktifkan tombol pertama, dan berikan tipe reset pada tombol ketiga.