9. Lists and Keys | Belajar React Js pemula

9. Lists and Keys | Belajar React Js pemula
Di Posting Oleh : wandi
Kategori : javascript Pemprograman web react

Lists and Keys Pada React JS

Dalam tutorial kali ini kita akan belajar bagaimana caranya membuat list dan keys pada react js dan belajar apa itu keys. list akan sangat berguna jika teman punya data yang banyak dan mau di tampilin dalam bentuk list dan yang perlu diingat setiap list wajib memiliki key yang berbeda. dalam tutorial ini kita akan menggunakan studi kasus membuat list makan menggunakan react js.

semple data

[
  {id:1,nama:'soto',harga:8000},
  {id:2,nama:'sate',harga:7000},
  {id:3,nama:'bakso',harga:10000},
  {id:4,nama:'nasi campur',harga:5000}
]

App.js

import React, { Component } from "react";
import List from "./List";
class App extends Component {
  constructor() {
    super();
    this.state = {
      list: [
        { id: 1, nama: "soto", harga: 8000 },
        { id: 2, nama: "sate", harga: 7000 },
        { id: 3, nama: "bakso", harga: 10000 },
        { id: 4, nama: "nasi campur", harga: 5000 }
      ]
    };
  }
  render() {
    return (
      <>
        <h1>daftar makanan</h1>
        <ol>
          {this.state.list.map((data, key) => {
            return <List key={key} nama={data.nama} harga={data.harga} />
          })}
        </ol>
      </>
    );
  }
}
export default App;

List.js

import React, { Component } from "react";
class List extends Component {
  render() {
    return (
      <li>
        {this.props.nama} = {this.props.harga}
      </li>
    );
  }
}

export default List;

pada contoh code diatas sengaja saya pisah agar kita sekalain belajar ngirim props ke component parent pada react.
Mau liat atau download source code aplikasi premium bisa disini.

Tweet