Cara Looping Data Dengan Map di Reactjs

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

Cara Looping Data Dengan Map di Reactjs

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

Cara Looping Data Dengan Map di Reactjs

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

Cara Looping Data Dengan Map di Reactjs

Kemudian kita akan looping dengan metode map()

Cara Looping Data Dengan Map di Reactjs

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

Cara Looping Data Dengan Map di Reactjs

Dan coba kita lihat pada console.log nya

Cara Looping Data Dengan Map di Reactjs

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()

Cara Looping Data Dengan Map di Reactjs

Dengan begitu erorr pada console.log nya sudah hilang

Cara Looping Data Dengan Map di Reactjs

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.

Hernowo Author

Leave a Reply

Your email address will not be published. Required fields are marked *