Membuat Search Component Menggunakan React JS

Search Component React js

Halo semua, kali ini saya bakal ngelanjutin materi kemarin. Buat kalian yang masih belum melihat artikel sebelumnya silahkan dilihat terlebih dahulu karena dasar pembuatan Search Component ini akan berkaitan dengan artikel sebelumnya.
Baca: Mengenal Map, Filter, dan Reduce pada Javascript
Sebelum kita melanjutkan ke pembahasan maka teman-teman harus pahami dulu dasar dari react js seperti props, state, use efect, lifting dan lain sebagainya. Kalau sudah paham dengan dasarnya langsung saja yah!

Search component yang nanti bakal kita buat yakni seperti search pada google. Jika diketikan sesuatu maka akan muncul tombol clear dan suggestionnya, hampir mirip lah dengan google.

Langkah pertama pastikan sudah menginstal react js. Jika belum silahkan instal yah untuk langkah-langkah penginstalannya ikuti dokumentasi dari web resmi react js.

Selanjutnya buat folder component. folder inilah tempat penyimpanan component-component misalkan component search, component tabs dan lain sebagainya. namun untuk kali ini kita buat component search saja. kemudian silahkan buat file Search.js (pastikan setiap file yang kita buat selalu diawali dengan huruf besar).

Jika semua sudah di lalui langsung saja ke kodingannya yah hehe hapy coding guys!!!

File App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Search } from './komponen/Search'
import { Info } from './komponen/Info'

function App() {
  return(
    <div>
      {/* <Info /> */}
      <Search
      items = {['naufal', 'alwi', 'aljabar', 'anwar', 'bintang', 'bahar', 'candra', 'celvin', 'yukafi', 'yurito']}
      label= 'input'
      placeholder = 'search..'
      style={{
        fontSize: '18px'
      }}
      />
    </div>
  )
}

export default App;

Penjelasan: Agar component search dapat kita jalankan maka kita harus mengexport file Search js nya lebih jelasnya seperti di kodingannya. file items adalah untuk menampung suggestion yang di tuangkan di dalam array.


File Search,js
import React from 'react'

export function Search(props) {
    //props item : selurh items yang lengkap (tanpa di filter)
    //state suggestion : items yang sudah di filter menggunakan state query
    // state query
    const [query, setQuery] = React.useState('') //buat nge set query
    const [suggestion, setSuggestion] = React.useState([]) // buat nge set suggestion

    React.useEffect(
        function () {//ini buat nge set suggestionnya nanti yang di bakal di lifting state up ke app.js
            const filteredItem = props.items.filter(function (item) { //di sini baut men filter siitemnya
                return item.includes(query)
            })
            setSuggestion(filteredItem)
        }, [query, props.items] //nah yang di dalam simbol array ini namanya dependensi yang mana isi dari dependensi ini adalah state yang di butuhkan di dalam function ini. 
    )

    function handleButtonClick() { //fungsi ini idenya saat di klik buttonnya maka akan menampilkan alert yang berisi sesuai inputan user
        alert(query)
    }

    function handleInputChange(event) { //fungsi ini untuk menghandle setiap inputan user, untuk lebih memahami silahkan cek di console google maka akan terlihat jelas.
        setQuery(event.target.value)
        console.log(event.target.value)
    }

    function handleClear() { // fungsi ini ketika tombol clear nya di klik maka akan membersihkan semua yang ada di inputannya
        setQuery('')
    }
    return (
        <div>
            <div
                style={{
                    display: 'Inline-block',
                    border: '1px solid black',
                    borderRadius: '8px',
                    fontSize: '18px',
                    padding: '10px',
                    margin: '10px',
                    marginTop: '20px',
                    marginLeft: '25%',
                    maxWidth: '50%'
                }}
            >
                <label
                    style={{
                        border: 'none',
                        outline: 'none',
                        pointer: '18px',
                        fontSize: '18px'
                    }}
                >
                    <input
                        style={{
                            border: 'none',
                            outline: 'none',
                            borderRadius: '10px',
                            fontSize: '18px',
                            pointer: '18px'
                        }}
                        value={query} //agar inputan bisa
                        onChange={handleInputChange} //memanggil fungsi handle change
                        type="text"
                        size='35'
                        placeholder={props.placeholder}
                    />
                    {query.length > 0 && <button
                        style={{
                            border: 'none',
                            outline: 'none',
                            backgroundColor: 'white',
                            fontSize: '18px'
                        }}
                        onClick={handleClear} //memanggil fungsi handleclear
                    >
                        &times;
                </button>}
                </label>
            </div>

            <button
                onClick={handleButtonClick} //ketika di klik maka menuju ke funsi handle button                      click
                style={{
                    borderRadius: '8px',
                    padding: '14px 50px',
                    backgroundColor: '#134f5c',
                    color: 'white',
                    outline: 'none'
                }}
            >klik</button>

            <div>
                <ul style={{
                    // border: '1px solid black',
                    listStyle: 'none',
                    fontSize: '18px',
                    padding: '10px',
                    margin: '0px',
                    marginTop: '0px',
                    marginLeft: '25%',
                    maxWidth: '37%'
                }}>{suggestion.map(function (items) { // untuk menampilkan suggestionnya
                    return <li
                        style={{
                            border: '1px solid grey',
                            borderRadius: '4px',
                            marginTop: '5px',
                            padding: '10px',
                        }}

                    >{items}</li>
                })}</ul>
            </div>
        </div>
    )

}

maka hasilnya akan seperti ini:


Jika temen-temen ingin download kodingannya bisa download digithub saya => Link Download.

Sekian, jika dirasa ada kesulitan atau kekurangan dalam artikel ini silahkan komentar di bawah yah, kita diskusikan bareng-bareng hehe. Terima Kasih

Naufal Yukafi
Naufal Yukafi Saya sangat suka dengan dunia web developer dan mobile app development jika pembaca tertarik silahkan kunjungi akun github saya @naufalyukafi

Posting Komentar untuk "Membuat Search Component Menggunakan React JS"