Tutorial Belajar Reactjs #8: Map dan Filter Array Pada React js

 

Tutorial Belajar Reactjs #8:Map dan Filter Array data Pada React js

Materi pada Tutorial kali ini merupakan lanjutan dari materi tutorial sebelumnya tentang

Tutorial Belajar Reactjs #7: Berpindah Halaman pada React js dengan menggunakan react Router.

pada materi ini kita akan mempelajari bagaimana cara menggolah data Array dengan menggunakan fungsi map dan filter pada react js.

Apa ttu Map dan Filter..?

- Map() saring digunakan untuk proses looping data, sama halnya dengan for each yang berfungsi untuk menapilkan data dari sebuah objact ,

- Filter() merupakan pengkondidisan tertentu dalam menampilkan atau mem proses data dari sebuah object, misal kita hanya ingin menampilkan data user yang berjenis kelaim laki-laki saja. maka kita bisa mengunakan fungsi filter() dan kondisi atau nilai yang kita ingin kan.

lengsung saja. kita coba praktekan penggunaan map() dan filter() pada react js, dan pada tutorial ini kita juga akan menggkombinasikan nya dengan menggunakan state pada react js untuk memfilter data yang akan kita tampilkan.

 pada tutorial sebelumnya kita telah membuat sebuah project react js dengan menggunakan react full library, untuk mempersingkat waktu kita bisa menggunakan project ini untuk meng implementasikan fungsi dari filter dan map() nya,

1.Buka project 

    pastikan project yang telah kita buat masih bisa berjalan tanpa ada error. Buat sebuah folder baru dalam folder Component, dan buat lagi dua file css dan javasriptnya

dalam tutorial Tutorial Belajar Reactjs #8: Map dan Filter Array Pada React js kali ini kita mencoba untuk mengolah data list makanan,  seperti data berikut ini.

var daftarMenu = [
    { id: 1, Nama: 'Pisang', group: 'Buah' },
    { id: 2, Nama: 'Appel', group: 'Buah' },
    { id: 3, Nama: 'Mangga', group: 'Buah' },
    { id: 4, Nama: 'Susu', group: 'Minuman' },
    { id: 5, Nama: 'Kopi', group: 'Minuman' },
    { id: 6, Nama: 'Teh', group: 'Minuman' },
    { id: 7, Nama: 'Wortel', group: 'Sayuran' },
    { id: 8, Nama: 'Brokoli', group: 'Sayuran' },
    { id: 9, Nama: 'Sawi', group: 'Sayuran' }
];

bagaimana cara kita mempilkan semua data diatas dengan menggunakan fungsi map() dan memfilter data tersebut sesua jenis group nya. langsung saja . tuliskan kode berikut ini dalam file javascript yang sudah kita buat tadi.

MapArray.js

 import React, { Component } from 'react';  
 import './style.css';  
 
 var daftarMenu = [  
   { id: 1, Nama: 'Pisang', group: 'Buah' },  
   { id: 2, Nama: 'Appel', group: 'Buah' },  
   { id: 3, Nama: 'Mangga', group: 'Buah' },  
   { id: 4, Nama: 'Susu', group: 'Minuman' },  
   { id: 5, Nama: 'Kopi', group: 'Minuman' },  
   { id: 6, Nama: 'Teh', group: 'Minuman' },  
   { id: 7, Nama: 'Wortel', group: 'Sayuran' },  
   { id: 8, Nama: 'Brokoli', group: 'Sayuran' },  
   { id: 9, Nama: 'Sawi', group: 'Sayuran' }  
 ];  
 
 class Maparray extends Component {  
   render() {  
     return (  
       <div>  
         <div className="container">  
           <div className="Titel">  
             Belajar Maping dan filter array Di React js  
           </div>  
           <div className="content">  
             <div className="Titel-content">  
               <p>Semua Daftar Makanan</p>  
             </div>  
             <CardComp arrydata={daftarMenu} />  
           </div>  
         </div>  
       </div>  
     );  
   }  
 }  
 
 //COmponent card  
 var CardComp = function (props) {  
   //ALl data Array  
   var listData = props.arrydata.map(function (data) {  
     return <div className="card-label" key={data.id}>{data.Nama}</div>  
   });  
   return (  
     <div>  
       { listData}  
     </div>  
   );  
 }  
 
 export default Maparray; 
 

style.css

.card-label {
    margin-top: 5px;
    margin-left: 5px;
    padding: 10px;
    float: left;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    background-color: #ffffff;
    width: auto;
}

.container {
    margin-top: 10px;
    width: 100%;
    padding: 10px;
    overflow: hidden;
}

.Titel {
    width: 100%;
    text-align: left;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    color: #303030;
    margin: 5px;
    padding: 10px;
}

.content {
    width: 100%;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 16px;
    color: #303030;
    padding: 5px;
}

.Titel-content {
    font-size: 15px;
    color: #303030;
    padding: 5px;
}

.btn {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 5px 10px 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
}

.combo {
    background-color: white;
    border: none;
    color: black;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
}

jika sudah save kedus file tersebut dan jangan lupa  untuk menginport component nya ke file App.js . jika masih biingung silahkan ikuti tutorial sebelumnya.

Import Component ke App,js

lalau tambahkan menu baru dan beri nama Map dan jangan lupa pastikan pacth nya mengerah ke router file yang sudah kita buat tadi. seperti berikut ini.

Tambahkan Menu Map

save dan jalankan program nya , jika berhasil maka output dari program nya seperti gambar berikut

Hasil Running Program

sampai Sini kita telah berhasil menampilkan data dengan menggunakan fungsi map(). dari object json yang kita miliki, lalu bagaimna untuk memberi fungsi filter, untuk menampilkan sata sesuai dengan filter yang kita tentukan. lanjut ke langkah berikut nya,

2. Memfilter data

selanjut nya kita akan mencoba memfilter data dari object json yang kita miliki dengan menggunakan fungsi filter(). 

disini kita juga coba implementasikan state untuk menampung filter dari data yang kita miliki,

apa itu state kalian juga bisa membaca tentang fungsi state dalam blog ini pada link berikut link

tutorial belajar state pada react js.

disini kita perlu mengubah filte maparray.js dan. tambahkan beberap koding berikut ini. 

- Fungsi Event OmChange Combobox setState 

    //Fungsi Onchange
    EvntOnChange(evnt) {
        const filterGroup = evnt.target.value;
        this.setState({
            pilihan: filterGroup
        })
        console.log(evnt.target.value)
    }

pada line 7 diatas untuk cek value yang dipilih dari combobox 

- Dekalrasi state

    constructor(props) {
        super(props);
        this.state = {
            pilihan: ''
        }

        this.EvntOnChange = this.EvntOnChange.bind(this);
    }

pada line 8 diatas , kita mendeklarasikan event onChange, agar dapat di digunakan dalam class maparray

- Tambahkan Combobox

 render() {  
     return (  
       <div>  
         <div className="container">  
           <div className="Titel">  
             Belajar Maping dan filter array Di React js  
           </div>  
           <div className="Titel-content">  
             <p>Pilih Menu yang dinginkan</p>  
           </div>  
           <select className="combo" name="group" id="group" onChange={this.EvntOnChange}>  
             <option value=""> -Pilih- </option>  
             <option value="Minuman">Minuman</option>  
             <option value="Buah">Buah</option>  
             <option value="Sayuran">Sayuran</option>  
           </select>  
           <CardComp arrydata={daftarMenu} group={this.state.pilihan} />  
         </div>  
         <div className="container">  
         </div>  
       </div>  
     );  
   }  

pada line 12  diatas kita memberikan fungsi setSete untuk merubah nilai state yang kita deklarasikan sebelumnya, pada event Oncahnge di combobox nya, dan nanti state nya yang kita gunakan untuk memfilter data yang kita miliki.

selanjut nya kita perlu merubah component card yang kita miliki , agar dapat menerima props yang kita kirimkan melalui combobox, dan di dalam component card ini lah kita akan melakukan filter data, yang kita ambil dari state nya.

- Componnet card

var CardComp = function (props) {  
   var listData = props.arrydata.filter(function (data) {  
     if (props.group === '') {  
       return data;  
     } else {  
       return data.group === props.group;  
     }  
   }).map(function (data) {  
     return <div className="card-label" key={data.id}>{data.Nama}</div>  
   });  
   return (  
     <div>  
       <p>  
         Anda Memilih List {props.group}  
       </p>  
       { listData}  
     </div>  
   );  
 }  

dan sekarang isi dari keselurahn file MapArray js nya menjadi seperi berikut.

MapArray,js

import React, { Component } from 'react';  
 import './style.css';  
 
 var daftarMenu = [  
   { id: 1, Nama: 'Pisang', group: 'Buah' },  
   { id: 2, Nama: 'Appel', group: 'Buah' },  
   { id: 3, Nama: 'Mangga', group: 'Buah' },  
   { id: 4, Nama: 'Susu', group: 'Minuman' },  
   { id: 5, Nama: 'Kopi', group: 'Minuman' },  
   { id: 6, Nama: 'Teh', group: 'Minuman' },  
   { id: 7, Nama: 'Wortel', group: 'Sayuran' },  
   { id: 8, Nama: 'Brokoli', group: 'Sayuran' },  
   { id: 9, Nama: 'Sawi', group: 'Sayuran' }  
 ];  
 
 class Maparray extends Component {  
   constructor(props) {  
     super(props);  
     this.state = {  
       pilihan: ''  
     }  
     this.EvntOnChange = this.EvntOnChange.bind(this);  
   }  
   //Fungsi Onchange  
   EvntOnChange(evnt) {  
     const filterGroup = evnt.target.value;  
     this.setState({  
       pilihan: filterGroup  
     })  
     console.log(evnt.target.value)  
   }  
   
   render() {  
     return (  
       <div>  
         <div className="container">  
           <div className="Titel">  
             Belajar Maping dan filter array Di React js  
           </div>  
           <div className="Titel-content">  
             <p>Pilih Menu yang dinginkan</p>  
           </div>  
           <select className="combo" name="group" id="group" onChange={this.EvntOnChange}>  
             <option value=""> -Pilih- </option>  
             <option value="Minuman">Minuman</option>  
             <option value="Buah">Buah</option>  
             <option value="Sayuran">Sayuran</option>  
           </select>  
           <CardComp arrydata={daftarMenu} group={this.state.pilihan} />  
         </div>  
         <div className="container">  
         </div>  
       </div>  
     );  
   }  
 }  
 
 var CardComp = function (props) {  
   var listData = props.arrydata.filter(function (data) {  
     if (props.group === '') {  
       return data;  
     } else {  
       return data.group === props.group;  
     }  
   }).map(function (data) {  
     return <div className="card-label" key={data.id}>{data.Nama}</div>  
   });  
   return (  
     <div>  
       <p>  
         Anda Memilih List {props.group}  
       </p>  
       { listData}  
     </div>  
   );  
   
 }  
 
 export default Maparray;  

kemudian save file nya, lalu jalakan kembali program nya, jika mengikuti tutorial ini step by step nya dengan benar maka hasil akhir dari runing program nya akan seperti berikut ini.

Hasil Runing Program final

kita bisa melakukan filter data dari object  array json dengan combobox 

Filter Group Buah

Filter Group Minuman

Filter Group Sayuran

Sampai disini kita telah berhasil mempelajari bagaimana cara menampilkan dan memfilter data pada react js dengan menggunakan fungsi map() dan filter. 

untuk lebih memahahami lagi tentang react js, bisa lanjut ke Tutorial Part #9.

Part#9 : Get data API menggunakan Fetch dan Axios Pada React js

Jika ada masukan dan saran mengenai postingan ini bisa berikan di kolom Komentar..

Sekian Dan Terima kasih...

#Happy Coding

#Keyword Penelusuran

• Belajar ReactJs 
• Tutorial ReactJs
• Cara memberi style pada component react js
• Cara Buat Project react js
• Berpindah Halaman pada react js
• cara buat menu Navigasi pada react js
• Cara memisahkan component pada react js
• Menampilkan data pada react js
• Filter data di react js
• map dan filter json pada react js

Share this post