React menggunakan props dan state untuk menghandle data di component

props

props adalah singkatan dari properties.

React component adalah seperti function JavaScript, jika function JavaScript bisa menerima sebuah argument maka React component bisa menerima props.

Dimana value dari props ini akan ditampilkan pada React element.

Copy
1<Component propsName="value" />

Data di dalam props ini dapat diakses di dalam component atau child component dengan mengakses object bernama props.

Kita akan tambahkan props pada component di App.js.

Copy
1const User = (props) => {
2  const { name } = props; // access name properties from props object using destructuring
3  return (
4    <div>
5      <h2>Hello {name}</h2>
6    </div>
7  );
8};
9
10export default function App() {
11  return (
12    <div>
13      <User name="Brachio" />
14    </div>
15  );
16}

Perlu diperhatikan bahwa props bersifat read-only, yang berarti data dari props tidak bisa diubah.

state

state digunakan untuk menghandle data di dalam component yang terus berubah.

state hanya bisa diakses di dalam component dimana state itu dibuat, sehingga tidak bisa diakses dari component lain.

Dalam sebuah React App perubahan dalam component atau proses render seringkali bergantung pada state.

Inisialisasi state

Pada React Function component inisialisasi state dilakukan dengan menggunakan React Hook useState().

Copy
1import React, { useState } from 'react';
2
3export default function App() {
4  const [state, setState] = useState('brachio');
5
6  return (
7    <div>
8      <h1>Hello Devsaurus</h1>
9      <p>My Name is {state}</p>
10    </div>
11  );
12}

• state untuk menyimpan data

• setState untuk mengubah data

state pada dasarnya adalah sebuah object, sehingga kita bisa menggunakan nama lain seperti:

Copy
1const [name, setName] = useState('brachio');

namun untuk saat ini kita akan tetap menggunakan nama state untuk mewakili state dalam component.

Mengakses value dari state

Value dari state dapat diakses di dalam component dengan menambahkan curly brackets {}.

Copy
1import React, { useState } from 'react'; // import useState
2
3export default function App() {
4  const [state, setState] = useState('brachio');
5
6  return (
7    <div>
8      <h1>Hello Devsaurus</h1>
9      <p>My Name is {state}</p>
10    </div>
11  );
12}

Mengubah state

state tidak bisa diubah secara langsung, untuk mengubah state kita harus menggunakan method setState().

Copy
1import React, { useState } from 'react';
2
3export default function App() {
4  const [state, setState] = useState('brachio');
5
6  const handleChange = () => {
7    setState('t-rex');
8  };
9
10  return (
11    <div>
12      <h1>Hello Devsaurus</h1>
13      <p>My Name is {state}</p>
14      <button onClick={handleChange}>Change Name</button>
15    </div>
16  );
17}

Pada code di atas kita menambahkan sebuah button, dimana button tersebut jika diklik akan mengubah value dari state.

Mengubah state tanpa menggunakan setState() membuat component tidak akan di re-render.

Pilih mana antara props dan state?

Jawabannya adalah keduanya, karena komunikasi data antar component sulit dilakukan tanpa memakai keduanya.

props & state pada React Class Component

Untuk mempelajari props & state pada React Class Component silahkan lihat disini.

Unidirectional Data Flow

Kita perlu memahami bagaimana data 'mengalir' dari satu component ke component yang lain.

React menerapkan konsep Unidirectional Data Flow , yaitu data mengalir hanya satu arah dari parent component ke child component.

Komunikasi data antar component

Sampai disini mungkin akan timbul pertanyaan, bagaimana kita bisa mengirim data dari component satu ke component lain jika props dan state tidak bisa diakses antar component dan data hanya mengalir satu arah dari parent ke child?

Ada beberapa teknik yang bisa digunakan, dan teknik-teknik ini sering dipakai bersamaan.

1. Parent ke child menggunakan props

Untuk mengirim data state yang ada di parent component ke child component kita bisa mengubah state tersebut menjadi props untuk child component.

Copy
1import React, { useState } from 'react';
2
3const User = (props) => {
4  const { name } = props;
5
6  return (
7    <div>
8      <p>My Name is {name} </p>
9    </div>
10  );
11};
12
13export default function App() {
14  const [state, setState] = useState('brachio');
15
16  return (
17    <div>
18      <h1>Hello Devsaurus</h1>
19      <User name={state} />
20    </div>
21  );
22}

2. Child ke parent menggunakan callback

Teknik ini bisa dibilang sedikit tricky karena sebagaimana dijelaskan bahwa data pada react mengalir dari parent ke child, teknik ini dipakai karena terkadang kita 'terpaksa' mengirim data dari child component ke parent component.

Untuk menggunakan teknik ini kita perlu memahami bagaimana React menghandle event yang terjadi dalam suatu component.

Copy
1import React, { useState } from 'react';
2
3const User = (props) => {
4  const { send } = props;
5
6  const sendDataToParent = () => {
7    send('brachio');
8  };
9
10  return (
11    <div>
12      <button onClick={sendDataToParent}>Get Name from Child</button>
13    </div>
14  );
15};
16
17export default function App() {
18  const [state, setState] = useState('');
19
20  const getName = (name) => {
21    setState(name);
22  };
23
24  return (
25    <div>
26      <h1>Hello Devsaurus</h1>
27      <User send={getName} />
28      <p>My Name is {state}</p>
29    </div>
30  );
31}

Pada code di atas:

• line 28, getName adalah callback function yang dikirim ke child sebagai props bernama send
• line 13, send pada child dieksekusi ketika button diclick melalui event handler sendDataToParent
• line 8, send menerima argument berupa data dari child. Karena getName sama dengan send maka getName juga menerima data yang sama
• Selanjutnya callback getName mengubah state pada parent dengan data yang diterima dari child component

3. Context

Kita bisa anggap context sebagai global state dan biasanya context ini dibuat di root component.

Karena bersifat global maka semua component di bawah root component dapat mengakses data yang ada di dalam context.

Pembahasan detail tentang context dibahas pada materi React Hook useContext().

4. React State Management Library

React State Management Library seperti Redux atau Recoil dapat digunakan untuk mengatur state di setiap component dan komunikasi yang terjadi antar component.

Namun baik Redux atau Recoil memiliki konsep atau aturan main sendiri untuk bisa menggunakannya. Sehingga butuh waktu untuk mempelajarinya.

React state management library sering digunakan pada React App yang kompleks yang mungkin telah memiliki puluhan bahkan ratusan component dan harus mengelola data dari banyak server/source.

Event Handling

Kita ambil penjelasan bagaimana React menghandle sebuah event dari dokumentasi React :

Handling event pada React mirip dengan handling event pada DOM element, namun dengan sedikit perbedaan:

• React event menggunakan camelCase, bukan lowercase
• Handler untuk event adalah sebuah function yang ditulis diantara curly braces {} dan tidak ditulis dalam bentuk string

Kita ambil contoh code pada pembahasan setState() sebelumnya:

Copy
1import React, { useState } from 'react';
2
3export default function App() {
4  const [state, setState] = useState('brachio');
5
6  const handleChange = () => {
7    setState('t-rex');
8  };
9
10  return (
11    <div>
12      <h1>Hello Devsaurus</h1>
13      <p>My Name is {state}</p>
14      <button onClick={handleChange}>Change Name</button>
15    </div>
16  );
17}

Event klik button pada React tidak ditulis onclick tapi onClick.

Event handler bernama handleChange berfungsi untuk menghandle event onClick, yang berarti ketika button di klik maka function bernama handleChange akan dieksekusi.

Event handler dengan Argument

Copy
1import React, { useState } from 'react';
2
3export default function App() {
4  const [state, setState] = useState('brachio');
5
6  const handleChange = (name) => {
7    setState(name);
8  };
9
10  return (
11    <div>
12      <h1>Hello Devsaurus</h1>
13      <p>My Name is {state}</p>
14      <button onClick={() => handleChange('t-rex')}>Change Name</button>
15    </div>
16  );
17}

Untuk event handler dengan argument kita harus menggunakan arrow function(untuk function component):

Copy
1<button onClick={() => handleChange('t-rex')}>Change Name</button>

Dan kita tidak bisa menulisnya seperti ini

Copy
1<button onClick={handleChange('t-rex')}>Change Name</button>

Jika kita menulisnya tanpa arrow function seperti di atas maka event handler akan dieksekusi di awal pada saat component mulai di-mount, sehingga tidak dieksekusi berdasarkan event yang terjadi di dalam component.