Passing Value dengan Props di React

Salah satu dasar pemrograman yang menurut saya wajib untuk dipelajari adalah bagaimana caranya melempar atau memberikan sebuah nilai (passing value) ke sebuah fungsi.

Di perkuliahan, saya mempelajari hal tersebut dengan menggunakan bahasa C# (C-Sharp) dan Java. Yaa bisa saya simpulkan bahwa sebenarnya konsepnya sama saja, namun caranya berbeda di setiap bahasa pemrograman.

Nah, sekarang saya sedang mempelajari bahasa JavaScript. Karena memang saya sedang fokus mengembangkan kemampuan saya pada bidang pengembangan aplikasi di platform web (Web Development) khususnya di bidang Front-End Web Development.

Untuk di JavaScript, caranya adalah seperti ini.

Pertama, saya akan buat dulu fungsinya. Kali ini adalah fungsi untuk menampilkan sebuah kalimat dengan masukkan dari user berupa nama mereka yang nilainya akan diterima fungsi tersebut dalam bentuk parameter.

function callMe(nama) {
    console.log("Selamat malam, " + nama + ". Gimana kabarnya?");
}

kemudian saya akan panggil fungsi tersebut dan sekaligus memasukkan nilai nama yang akan ditampilkan.

callMe("Bagas");

dan hasilnya pun menjadi seperti ini.

Passing value on js

kemudian saya belajar sebuah framework yang bernama React. Framework ini dibuat oleh Facebook yang digunakan untuk membangun tampilan antarmuka pengguna (user interface).

Disini saya mengenal beberapa istilah baru seperti Component-Based, JSX, Props, State, dan masih banyak lagi.

Sekarang yang saya ingin tulis adalah tentang Props, Let’s Go.

Props ini adalah singkatan dari properties. Penggunaannya mirip bahkan sama seperti parameter yang ada pada sebuah fungsi. Untuk passing value ke sebuah fungsi yang bisa dari masukkan user atau yang lainnya.

Tapi setelah membaca dokumentasi yang ada di laman dokumentasinya, saya menemukan sebuah info yang menarik.

Yaitu ini.

Definisi

Jadi, kalau yang dikatakan pada definisi diatas adalah sebuah komponen akan valid apabila pada setiap fungsinya hanya menerima 1 props saja dengan data dan akan membuat kembalian (return) berupa React Element.

Disini saya akan mencoba mengganti kalimat “Edit src/App.js and save to reload.” pada laman awal yang ditampilkan setelah membuat project baru dengan kalimat “Hello friends! This is Bagas personal website.”.

Pertama, saya akan menambahkan parameter “props” pada fungsi App, digunakan untuk menampung nilai yang nantinya akan didapatkan dari masukkan pengguna.

Dan saya membuat sebuah tag p (paragraph tag) untuk menampilkan nilai yang ada di props tersebut. Tak lupa menuliskan nama props yang digunakan untuk menampung value atau nilainya.

function App(props) {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          {props.hello}          
        </p>
      </header>
    </div>
  );
}

Kemudian memasukkan value kedalam props yang saya buat didalam tag App yang dipanggil pada index.js.

ReactDOM.render(<App hello="Hello friends! This is Bagas
personal website."/>, 
document.getElementById('root'));

Maka hasilnya akan menjadi seperti ini.

UsingProps

Itu tadi penjelasan singkat tentang passing value menggunakan props di React dari saya. Semoga bermanfaat buat saya sendiri dan bagi yang mampir dan membaca tulisan ini.

Kalau memang masih penasaran bisa langsung googling, baca dokumentasi di websitenya React, atau bisa langsung dm telegram saya, kita belajar bareng.

Thank you!