Halo, kembali lagi di artikel tips dan trik seputar dunia website dumetschool. Pada kesempatan kali ini kita akan melanjutkan belajar reactjs yaitu Cara Looping Data Dengan Map di Reactjs, pertama kita akan membuat state yang berisi data array.

Kemudian akan kita looping menggunakan metode map() dan kita masih menggunakan script sebelumnya yaitu App.js. Silahkan teman – teman ketikkan seperti gambar di bawah ini

Dan kita akan looping data di dalam component BelajarProps.js silahkan buat terebih dahulu

Selanjutnya kita akan membuat state yang di dalamnya kita berikan data array

Kemudian kita akan looping dengan metode map()

Pertama kita inisialisai data pada state, yaitu berupa array berisi data interger dari angka 1 – 10, kemudian kita berikan const result untuk menampul hasil looping menggunakan map() dan di dalam map terdapat parameter, parameter pertama adalah value nya dan parameter ke dua adalah sebagai indexnya. Kemudian const result kita tampilkan diantara tag <ul>, maka hasilnya seperti gambar di bawah ini

Dan coba kita lihat pada console.log nya

Pada reactjs ketika kita looping data, kita perlu memberikan key pada setiap list nya, maka dari itu key akan kita isi dengan index yang ada di parameter ke 2 pada map()

Dengan begitu erorr pada console.log nya sudah hilang

Bagaimana, sangat mudah bukan..??

Untuk Script lengkapnya nya seperti di bawah ini

import React, {Component} from 'react'

class BelajarProps extends Component{
    state ={
        data:[1,2,3,4,5,6,7,8,9,10]
    }
    render(){
        const result = this.state.data.map((value, index) => {
            return(<li key={index}>{value}</li>)
        })
        return(
            <div>
                <h1>Looping Data Dengan Map Reactjs</h1>
                    <ul>
                        {result}
                    </ul>
            </div>
        )
    }
}
export default BelajarProps

Baik, sekian pada artikel kali ini tentang Cara Looping Data Dengan Map di Reactjs tentu kita akan jumpa kembali pada artikel berikutnya. Terimakasih dan sampai jumpa.