Halo teman-teman semuanya, di artikel sebelumnya kita sudah belajar bagaimana cara membuat proses insert data di dalam React.js dengan memanfaatkan Rest API yang ada di dalam project Express.js. Dan di artikel kali ini kita semua akan belajar bagaimana cara membuat proses edit dan update data ke dalam database di dalam React.js.
Langkah 1 - Menambahkan Button Edit
Pertama-tama kita akan belajar bagaimana cara menampilkan button edit terlebih dahulu di dalam halaman post index, dimana ketika button ini di klik akan menuju ke dalam sebuah form yang berisi data yang akan di update.
Silahkan buka file src/pages/posts/Index.js, kemudian cari kode berikut ini :
{ posts.map((post, index) => (
<tr key={ post.id }>
<td>{ index + 1 }</td>
<td>{ post.title }</td>
<td>{ post.content }</td>
<td className="text-center"></td>
</tr>
)) }
Setelah itu, silahkan ubah menjadi seperti berikut ini :
{ posts.map((post, index) => (
<tr key={ post.id }>
<td>{ index + 1 }</td>
<td>{ post.title }</td>
<td>{ post.content }</td>
<td className="text-center">
<Button as={Link} to={`/posts/edit/${post.id}`} variant="primary" size="sm" className="me-2">EDIT</Button>
</td>
</tr>
)) }
Di atas, kita menambahkan 1 button baru dengan nama EDIT dan kita arahkan ke dalam URL /posts/edit/:id. Dimana nilai :id akan diisi secara dinamis berdasarkan id dari data post.
Sekarang jika kita reload halaman post index, maka kita akan mendapatkan hasil kurang lebih seperti berikut ini :
Langkah 2 - Menambahkan Form Edit dan Proses Update
Setelah berhasil menambahkan button EDIT, sekarang kita lanjutkan untuk menampilkan data yang akan di update di dalam form edit. Disini kita akan melakukan perubahan kode di dalam halaman / component yang sudah kita buat sebelumnya.
Silahkan buka file src/pages/posts/Edit.js, kemudian ubah semua kode-nya menjadi seperti berikut ini :
//import hook useState dan useEffect from react
import { useState, useEffect } from 'react';
//import component Bootstrap React
import { Card, Container, Row, Col , Form, Button, Alert } from 'react-bootstrap';
//import axios
import axios from 'axios';
//import hook history dan params dari react router dom
import { useHistory, useParams } from "react-router-dom";
function EditPost() {
//state
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
//state validation
const [validation, setValidation] = useState({});
//history
const history = useHistory();
//get ID from parameter URL
const { id } = useParams();
//hook useEffect
useEffect(() => {
//panggil function "getPOstById"
getPostById();
}, []);
//function "getPostById"
const getPostById = async() => {
//get data from server
const response = await axios.get(`http://localhost:3000/api/posts/${id}`);
//get response data
const data = await response.data.data
//assign data to state
setTitle(data.title);
setContent(data.content);
};
//function "updatePost"
const updatePost = async (e) => {
e.preventDefault();
//send data to server
await axios.patch(`http://localhost:3000/api/posts/update/${id}`, {
title: title,
content: content
})
.then(() => {
//redirect
history.push('/posts');
})
.catch((error) => {
//assign validation on state
setValidation(error.response.data);
})
};
return (
<Container className="mt-3">
<Row>
<Col md="{12}">
<Card className="border-0 rounded shadow-sm">
<Card.Body>
{
validation.errors &&
<Alert variant="danger">
<ul class="mt-0 mb-0">
{ validation.errors.map((error, index) => (
<li key={index}>{ `${error.param} : ${error.msg}` }</li>
)) }
</ul>
</Alert>
}
<Form onSubmit={ updatePost }>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>TITLE</Form.Label>
<Form.Control type="text" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Masukkan Title" />
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label>CONTENT</Form.Label>
<Form.Control as="textarea" rows={3} value={content} onChange={(e) => setContent(e.target.value)} placeholder="Masukkan Content" />
</Form.Group>
<Button variant="primary" type="submit">
UPDATE
</Button>
</Form>
</Card.Body>
</Card>
</Col>
</Row>
</Container>
);
}
export default EditPost;
Dari perubahan kode di atas, pertama kita melakukan import 2 hook dari React.js, yaitu useState dan useEffect.
//import hook useState dan useEffect from react
import { useState, useEffect } from 'react';
Kemudian kita juga import beberapa component dari React Bootstrap yang nanti akan digunakan di dalam halaman / component ini.
//import component Bootstrap React
import { Card, Container, Row, Col , Form, Button, Alert } from 'react-bootstrap';
Karena akan melakukan HTTP request ke dalam endpoint Rest API, maka kita juga harus melakukan import Axios.
//import axios
import axios from 'axios';
Terakhir, kita melakukan import 2 hook dari React Router Dom, yaitu useHistory dan useParams. Untuk hook useHistory akan kita gunakan untuk melakukan navigasi ke URL lain. Sedangkan untuk useParams akan digunakan untuk mengambil nilai parameter yang ada di URL browser.
//import hook history dan params dari react router dom
import { useHistory, useParams } from "react-router-dom";
Dan di dalam function component EditPost, pertama-tama kita melakukan definisi beberapa state terlebih dahulu.
//state
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
//state validation
const [validation, setValidation] = useState({});
Setelah itu, kita membuat variable dengan nama history, yang mana isinya adalah hook useHistory dari React Router Dom.
//history
const history = useHistory();
Dan kita juga membuat variable dengan nama id dengan jenis objek, yang isinya diambil dari parameter URL di browser. Variable inilah yang nanti akan kita gunakan sebagai parameter untuk mencari data di server melalui Rest API.
//get ID from parameter URL
const { id } = useParams();
Setelah itu, kita menggunakan hook useEffect, hook ini akan dijalankan ketika component telah di mount. Dan di dalam hook ini, kita memanggil method yang bernama getPostById.
//hook useEffect
useEffect(() => {
//panggil function "getPostById"
getPostById();
}, []);
Di dalam method getPostById kita melakukan HTTP request ke dalam sebuah endpoint untuk mendapatkan detail data, yang nanti akan ditampilkan di halaman form edit.
//get data from server
const response = await axios.get(`http://localhost:3000/api/posts/${id}`);
Jika dari proses fetching data di atas berhasil dilakukan, maka kita akan masukkan data responsenya ke dalam variable yang bernama data.
//get response data
const data = await response.data.data
Setelah itu, kita akan assign atau masukkan data tersebut ke dalam state, yaitu title dan content.
//assign data to state
setTitle(data.title);
setContent(data.content);
Kemudian, kita membuat method yang bernama updatePost, method ini akan dijalankan ketika form dilakukan submit.
<Form onSubmit={ updatePost }>
//...
</Form>
Dan di dalam method updatePost sendiri, kita akan mengirimkan data yang ada di dalam state ke dalam endpoint Rest API untuk proses update data menggunakan Axios dengan method PATCH.
//send data to server
await axios.patch(`http://localhost:3000/api/posts/update/${id}`, {
title: title,
content: content
})
Jika data berhasil di update di dalam server, maka kita akan melakukan redirect ke dalam URL /posts menggunakan hook useHistory.
//redirect
history.push('/posts');
Tapi, jika data gagal di update, maka kita akan assign atau masukkan error response validasi ke dalam state validation.
//assign validation on state
setValidation(error.response.data);
Dan untuk menampilkan validasi di dalam JSX, kurang lebih seperti berikut ini :
{
validation.errors &&
<Alert variant="danger">
<ul class="mt-0 mb-0">
{ validation.errors.map((error, index) => (
<li key={index}>{ `${error.param} : ${error.msg}` }</li>
)) }
</ul>
</Alert>
}
Di atas, kita membuat sebuah kondisi, jika ada state validation.errors, maka kita akan melakukan perulangan di dalamnya. Dan data yang di looping tersebut adalah state validation itu sendiri.
Langkah 3 - Uji Coba Proses Edit dan Update Data
Sekarang, silahkan klik button EDIT di salah satu data post yang ada di halaman post index, jika berhasil maka kita akan diarahkan ke halaman edit form dengan data yang akan di update.
Silahkan sesuaikan data yang ada di dalam setiap inputan dan klik UPDATE, jika berhasil maka kita akan di arahkan ke dalam halaman post index dengan data yang berhasil di perbarui.
Sampai disini pembahasan bagaimana cara membuat proses edit dan juga update data di dalam React.js, di artikel selanjutnya kita akan belajar bagaimana cara membuat proses delete data di dalam React.js.
Terima kasih