07. REACT NATIVE – PROPS

Data yang ada dalam komponen React di kelola dengan mengunakan state dan props. Pada pembahasan ini menjelaskan meteri komponen yang dinamis dengan menggunakan props (property). Dalam pemrograman web props itu seperti sebuah atribut dalam tag HTML. Dalam contoh berikut dijelaskan pembuatan props pada,
a) Functional komponen (props disebut dengan parameter).
b) Class komponen (props disebut property dari class diakses
dengan keyword ‘this’)

Berikut contoh sintak props pada pembuat galeri produk:

• Contoh dengan Functional Component App.js

import React from "react";
import { View, Text, Image } from "react-native";
const App = () => {
  return (
    <View style={{ flexDirection: "row" }}>
      <Gallery gambar="https://cdn.rri.co.id/berita/Pontianak/o/1717123060208-bahan_baju/dodn7zqvkt3w8z5.jpeg" harga="Rp. 10.000" deskripsi="Pakaian" />
      <Gallery gambar="https://aseranishi.com/wp-content/uploads/2023/11/rekomendasi-jenis-alat-elektronik-rumah-tangga.jpg" harga="Rp. 15.000" deskripsi="Elekronik" />
      <Gallery gambar="https://rsa.ugm.ac.id/wp-content/uploads/sites/60/c563e26a-6870-46a3-a512-a19a8e9c3e81.jpg" harga="Rp. 20.000" deskripsi="Bahan Makan" />
    </View>
  );
};
const Gallery = (props) => {
  return (
    <View
      style={{
        borderColor: "black",
        borderWidth: 1,
        borderRadius: 20,
        padding: 10,
        width: 120,
        backgroundColor: "white",
        marginTop: 10,
        marginRight: 10,
        alignItems: "center",
      }}
    >
      <Image source={{ uri: props.gambar }} style={{ height: 100, width: 100 }} />
      <Text style={{ marginTop: 10, color: "black" }}>{props.harga}</Text>
      <Text style={{ marginTop: 10, color: "black" }}>{props.deskripsi}</Text>
    </View>
  );
};
export default App;

Output yang dihasilkan :

- Contoh dengan Class Component
App.js

import React, { Component } from "react";
import { View, Text, Image } from "react-native";
const App = () => {
  return (
    <View style={{ flexDirection: "row" }}>
      <Gallery gambar="https://cdn.rri.co.id/berita/Pontianak/o/1717123060208-bahan_baju/dodn7zqvkt3w8z5.jpeg" harga="Rp. 10.000" deskripsi="Pakaian" />
      <Gallery gambar="https://aseranishi.com/wp-content/uploads/2023/11/rekomendasi-jenis-alat-elektronik-rumah-tangga.jpg" harga="Rp. 15.000" deskripsi="Elekronik" />
      <Gallery gambar="https://rsa.ugm.ac.id/wp-content/uploads/sites/60/c563e26a-6870-46a3-a512-a19a8e9c3e81.jpg" harga="Rp. 20.000" deskripsi="Bahan Makan" />
    </View>
  );
};
class Gallery extends Component {
  render() {
    return (
      <View
        style={{
          borderColor: "black",
          borderWidth: 1,
          borderRadius: 20,
          padding: 10,
          width: 120,
          backgroundColor: "white",
          marginTop: 10,
          marginRight: 10,
          alignItems: "center",
        }}
      >
        <Image source={{ uri: this.props.gambar }} style={{ height: 100, width: 100 }} />
        <Text style={{ marginTop: 10, color: "black" }}>{this.props.harga}</Text>
        <Text style={{ marginTop: 10, color: "black" }}>{this.props.deskripsi}</Text>
      </View>
    );
  }
}
export default App;

Outputnya :

Berikut adalah point penting yang perlu diperhatikan dalam
pengunaan Props :
a) Fungsi atau Class dari props hanya dapat diubah valuenya oleh pemangilannya.
b) Prop umumnya digunakan untuk komunikasi data component
dari parent komponent ke child component