1. Props Fundamental

React component merupakan fungsi JavaScript, kita dapat memberikan parameter ketika menggunakannya. Namun, React component hanya dapat menerima satu parameter--berupa objek--yang biasa kita sebut dengan properties (props).

Props di dalam JSX bisa untuk semua tipe data baik itu number, string, boolean,array, object, function dan lain-lain.

React Data Flow

Alt text

Sumber : https://dev.to/stuxnat/final-react-project-2poi

Pada React Data Flow di atas dapat disimpulkan jika props adalah

Props dikirimkan dari parent component ke child component dan tidak bisa sebaliknya
Props bersifat immutable artinya child component tidak bisa memperbaharui value props.
Props bersifat read-only di child component.
Jika value props diperbahaui oleh parent component , maka child component akan di render kembali.

1. Membuat Props pada Komponen

Pada kode dibawah adalah contoh bagaimana membuat props pada komponen.

Cara 1

app/component/Latihan.tsx

interface Props {
  name: string;
  username: string;
  age: number;
  isVerified: boolean;
}

export default function Latihan(props: Props) {
  console.log('props', props)
  return (
    <div className="container">
      <dl>
        <dt>Name: </dt>
        <dd>{props.name}</dd>
        <dt>Username: </dt>
        <dd>{props.username}</dd>
        <dt>Age: </dt>
        <dd>{props.age}</dd>
        <dt>Verified: </dt>
        <dd>{props.isVerified ? "yes" : "no"}</dd>
      </dl>
    </div>
  );
}

Pada cara 1 ini , props diterima sebagai object pada argument, karena kita menggunakan typescript maka kita define untuk type data.

Kemudian ketika saat render di JSX dengan cara {props.[nama_property]}.

Cara 2

app/component/Button.tsx

interface ButtonProps {
  title: string;
  isDisabled: boolean;
}

const Button: React.FC<ButtonProps> = ({ title, isDisabled }) => {
  return (
    <button
      disabled={isDisabled}
      className="w-16 h-8 rounded border bg-red-400"
    >
      {title}
    </button>
  );
};

export default Button;

Pada cara 2 , props diterima sebagai Object destructuring pada argument, terlihat kita menggukan {} untuk menampung nama property pada object.

Kemudian kita ketika render pada JSX dengan cukup {nama_property}.

2. Memanggil pada komponen app

Setelah membuat props, Kita akan memanggil komponen Latihan dan Button yang sudah kita buat pada komponen app/page.ts

app/page.ts

import Button from "./component/Button";
import Latihan from "./component/latihan";

const Home = () => {
  return (
    <main>
      <h1>Hello World</h1>
      <Latihan
        name="ihsan"
        username="ihsanabuhanifah"
        age={30}
        isVerified={true}
      />
      <Button title="Simpan" isDisabled={false} />
      <Button title="cancel" isDisabled={true} />
    </main>
  );
};

export default Home;

3. Jalankan pada Browser

Alt text