Halo teman-teman semuanya, di artikel sebelumnya kita telah belajar bagaimana cara menampilkan data di dalam React.js dan datanya di ambil dari Rest API yang dibuat di dalam Express.js. Dan di artikel kali ini kita semua akan belajar bagaimana cara membuat proses insert data di dalam React.js
Langkah 1 - Membuat Form dan Proses Insert Data
Sekarang kita akan mengubah isi dari halaman / component yang sudah pernah kita buat sebelumnya. Silahkan buka file src/pages/posts/Create.js, kemudian ubah semua kode-nya menjadi seperti berikut ini :
//import hook useState from react
import { useState } 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 dari react router dom
import { useHistory } from "react-router-dom";
function CreatePost() {
//state
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
//state validation
const [validation, setValidation] = useState({});
//history
const history = useHistory();
//method "storePost"
const storePost = async (e) => {
e.preventDefault();
//send data to server
await axios.post('http://localhost:3000/api/posts/store', {
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={ storePost }>
<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">
SIMPAN
</Button>
</Form>
</Card.Body>
</Card>
</Col>
</Row>
</Container>
);
}
export default CreatePost;
Dari perubahan kode di atas, pertama kita melakukan import hook useState dari React.js.
//import hook useState from react
import { useState } from 'react';
Kemudian kita import beberapa component dari React Bootstrap.
//import component Bootstrap React
import { Card, Container, Row, Col , Form, Button, Alert } from 'react-bootstrap';
Dan karena akan melakukan sending data ke server menggunakan Rest API, maka kita butuh import library Axios.
//import axios
import axios from 'axios';
Karena setelah proses insert data berhasil akan di redirect ke halaman utama, maka kita akan melakukan import hook useHistory dari React Router Dom.
//import hook history dari react router dom
import { useHistory } from "react-router-dom";
Dana di dalam function component CreatePost, pertama-tama kita membuat beberapa state terlebih dahulu.
//state
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
//state validation
const [validation, setValidation] = useState({});
Di atas, kita membuat 3 state baru, yaitu title, content dan validation. Untuk state title dan content akan digunakan untuk menyimpan data yang diketik di dalam input form. Dan sedangkan untuk state validation akan digunakan untuk menyimpan error response dari Rest API.
Setelah itu, kita membuat variable dengan nama history, yang mana isinya adalah hook useHistory dari React Router Dom.
//history
const history = useHistory();
Kemudian kita membuat method yang bernama storePost, method ini akan dijalankan ketika form di submit.
<Form onSubmit={ storePost }>
//...
</Form>
//method "storePost"
const storePost = async (e) => {
//...
}
Di dalam method storePost, pertama kita atur dengan event preventDefault, tujuannya agar form saat di submit tidak melakukan reload page.
e.preventDefault();
Setelah itu, di dalamnya kita melakukan sending data menggunakan Axios dengan method POST ke dalam endpoint http://localhost:3000/api/posts/store dengan mengirimkan 2 parameter data, yaitu title dan content. Dimana data-nya di ambil dari state.
//send data to server
await axios.post('http://localhost:3000/api/posts/store', {
title: title,
content: content
})
Jika proses insert data berhasil dilakukan, maka kita akan melakukan redirect ke dalam URL /posts.
//redirect
history.push('/posts');
Tapi, jika data gagal di insert, maka kita akan melakukan assign error response ke dalam state yang bernama validation.
//assign validation on state
setValidation(error.response.data);
Dan, untuk menampilkan error 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.
Dan di dalam input form, untuk mengirimkan value ke dalam state, kita menggunakan onChange, kurang lebih seperti berikut ini :
<Form.Control type="text" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Masukkan Title" />
<Form.Control as="textarea" rows={3} value={content} onChange={(e) => setContent(e.target.value)} placeholder="Masukkan Content" />
Di atas, jika terdapat perubahan di dalam input atau onChange, maka akan menjalankan state handler dan melakukan assign value ke dalam state.
Langkah 2 - Uji Coba Proses Insert Data
Sekarang kita akan lakukan uji coba untuk proses insert data. Silahkan klik button TAMBAH POST yang berada di halaman post index atau bisa ke URL berikut ini http://localhost:3001/posts/create, jika berhasil maka akan menampilkan halaman seperti berikut ini :
Silahkan klik button SIMPAN tanpa memasukkan data apapun, maka kita akan mendapatkan error validasi yang di dapatkan dari Rest API Express.js.
Dan jika kita coba isi data title dan content dan klik button SIMPAN lagi, maka kita akan diarahkan ke halaman post index dengan data yang telah di insert.
Sampai disini pembahasan bagaimana cara melakukan proses insert data di dalam React.js, di artikel selanjutnya kita akan belajar bagaimana cara membuat proses edit dan update data di dalam React.js dengan Rest API yang dibuat di dalam Express.js.
Terima kasih