Cara Membuat ToDo List Dengan React Hooks!

Apa itu Hooks dalam React ?

Hooks adalah Function yang ada pada React yang membuat kamu bisa menggunakan State atau fitur React lainnya tanpa harus menulis Class ES6 di dalamnya.

Keuntungan menggunakan Hooks antara lain :

Mengisolasi logika stateful, membuatnya lebih mudah untuk diuji.
Berbagi logika stateful tanpa render props atau komponen tingkat tinggi.
Memisahkan masalah aplikasi kamu berdasarkan logika, bukan lifecycle hooks.
Menghindari penggunaan class ES6

Untuk lebih jelasnya perihal apa itu Hooks, kamu bisa mengunjungi link React Hooks.

ToDo List biasanya berisi mengenai daftar hal-hal apa saja yang akan kamu lakukan di masa mendatang, atau daftar belanja yang harus anda beli di supermaret.

Baca Juga :

Dalam praktiknya, membuat program serupa bukanlah hal yang rumit. Kamu bisa membangun Program ToDo List dengan menggunakan React Hooks.

Pada contoh program yang akan kita buat, nantinya didalam ToDo List akan kita beri opsi seperti :

Menampilkan Daftar ToDo
Menambahkan ToDo via Input
Menghapus ToDo

Setup

Jika kamu malas membangun codenya dari awal, kamu bisa mendownload source codenya melalui link Github.

Component ToDo

Buat file baru dengan nama src/ToDoForm.js dengan code seperti berikut :

import React from ‘react’;

import TextField from ‘@material-ui/core/TextField’;

const TodoForm = ({ saveTodo }) => {

return (

<form>

</form>

);

};

export default TodoForm;

Sesuai nama filenya, perintah code diatas adalah untuk menambahkan ToDo pada State. Dan berikut ini Hooks pertama yang akan kita gunakan untuk membuatnya.

useState

import { useState } from ‘react’;

const [value, setValue] = useState(”);

useState hanyalah fungsi yang mengambil status awal dan mengembalikan array. Silakan dan console.log itu.

Indeks pertama array adalah nilai state kamu saat ini, dan indeks kedua adalah updater function.

Jadi kita akan menamai mereka dengan Value dan setValue menggunakan destruction assignment ES6.

useState dengan Form

Form yang kita buat harus melacak value input dan memanggil saveTodo saat mengirim atau di submit. useState dapat membantu kita dalam mencapai hal tersebut.

Perbarui file TodoForm.js kamu dengan code seperti berikut :

import React, { useState } from ‘react’;

import TextField from ‘@material-ui/core/TextField’;

const TodoForm = ({ saveTodo }) => {

const [value, setValue] = useState(”);

return (

<form

onSubmit={(event) => {

event.preventDefault();

saveTodo(value);

}}

<TextField

variant=”outlined”

placeholder=”Add todo”

margin=”normal”

onChange={(event) => {

setValue(event.target.value);

}}

value={value}

</form>

);

};

Baca Juga :

export default TodoForm;

Lalu buka file Index.js, Import dan gunakan component berikut :

// …

import TodoForm from ‘./TodoForm’;

// …

const App = () => {

return (

Todos

</Typography>

</div>

);

};

Dengan demikian, value yang kamu input akan terkirim begitu menekan tombol submit atau enter.

useState dengan ToDos

Kita juga perlu menyisipkan useState pada ToDos. Import useState di Index.js. Keadaan awal kita harus berupa array kosong.

Baca Juga : 5 Cara Mudah Membuat Website dengan WordPress

import React, { useState } from ‘react’;

// …

const App = () => {

const [todos, setTodos] = useState([]);

// …

};

Component ToDo List

Buat file baru dengan nama TodoList.js. Dan ketikan code seperti ini didalamnya :

import React from ‘react’;

import List from ‘@material-ui/core/List’;

import ListItem from ‘@material-ui/core/ListItem’;

import ListItemSecondaryAction from ‘@material-ui/core/ListItemSecondaryAction’;

import ListItemText from ‘@material-ui/core/ListItemText’;

import Checkbox from ‘@material-ui/core/Checkbox’;

import IconButton from ‘@material-ui/core/IconButton’;

import DeleteIcon from ‘@material-ui/icons/Delete’;

const TodoList = ({ todos, deleteTodo }) => (

<List>

{todos.map((todo, index) => (

<IconButton

aria-label=”Delete”

onClick={() => {

deleteTodo(index);

}}

</IconButton>

</ListItemSecondaryAction>

</ListItem>

))}

</List>

);

Baca Juga Artikel Menarik Lainnya :

export default TodoList;

Dibutuhkan dua props :

todos: Array todos. Kami memetakan masing-masing dan membuat item daftar.
deleteTodo: Mengklik IconButton todo melakukan fungsi ini. Itu melewati indeks, yang secara unik akan mengidentifikasi todo dalam daftar kita.

Impor Component ini di index.js kamu.

import TodoList from ‘./TodoList’;

import ‘./styles.css’;

const App = () => {

//…

};

Dan gunakan dalam fungsi App kamu seperti itu

Baca Juga : 10 Keuntungan Menggunakan React JS Pada Desain Website

Adding ToDos

Masih dalam index.js , mari kita edit bagian prop TodoForm, SaveTodo

<TodoForm

saveTodo={(todoText) => {

const trimmedText = todoText.trim();

if (trimmedText.length > 0) {

setTodos([…todos, trimmedText]);

}

}}

Cukup gabungkan todos yang ada dengan yang baru dengan spasi kosong tambahan. Dan kita bisa menambahkan daftar ke program ToDo kita sekarang.

Clearing The Input

Kalo kamu perhatikan, ketika kita menginput ToDo baru, Value pada form inputnya tidak hilang. Hal ini merupakan User Experience yang buruk dan perlu kita hilangkan.

Kita bisa memperbaiki hal tersebut dengan menambahkan code berikut pada file TodoForm.js

<form

onSubmit={(event) => {

event.preventDefault();

saveTodo(value);

setValue(”);

}}

Begitu kamu save dan coba menjalankan lagi programnya, maka setelah di input, nilai atau value yang ada pada form input akan hilang setelah di submit.