“Props” adalah kata kunci khusus di React. Props digunakan untuk meneruskan data ke komponen.

Sementara prop menggunakan seperti variabel dalam komponen, kita bisa tiba dengan objek props ke komponen.

Prop adalah objek JavaScript dan di dalam prop menyimpan nama dan variabel prop.

Karena adanya props, kita dapat melakukan transfer nilai antar komponen.

Komponen 1:

import react from 'react';
import Users from './Users';

function Counter() {
  return(
    <>
      <Users name="Fatma" />
    </>
  );
}
export default Counter;

function Users(props) {
  return (
    <>
    {props.name}
    </>
  );
}
export default Users;

Alih-alih menulis props setiap saat, kita dapat menulis properti di dalam komponen;
Seperti ini;

function Users({name, age}) {
  return (
    <>
    <h1>{name} {age}</h1>
    </>
  );
}

export default Users;

Tujuan dari ini; setiap proses daftar dll. key prop digunakan untuk membuat daftar ekspresi yang kami kembalikan dalam loop dengan kinerja yang baik. Elemen terluar dapat diberi penyangga kunci.

Jenis Alat Peraga

Sebelum semuanya, kita perlu mengimpor ke PropTypes.

Saat kami mengirim tipe ke properti yang kami definisikan, kami mendefinisikan tipe di luar komponen.

import PropTypes from "prop-types";

function Users({name, age, answer}) {
  return (
    <>
    <h1>{name} {age}</h1>
    </>
  );
}

Users.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  answer: PropTypes.bool,
};

export default Users;

Jika kita menulis isRequired di sebelahnya setelah menentukan jenis alat peraga, bidang tersebut tidak boleh dibiarkan kosong.

Kami menulis isRequired di sebelah properti yang jenisnya telah kami tentukan;

name: PropTypes.string.isRequired,

Jika kita akan memasukkan lebih dari satu tipe data untuk sebuah properti, kita menggunakan OneOfType.

age: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

Saat data tipe objek dimasukkan, kami menggunakan bentuk untuk menentukan tipe elemen turunan dari objek.

address: PropTypes.shape({title : PropTypes.string, zipCode: PropTypes.number,}),

kita dapat memberikan nilai default ke prop yang tidak diberi tipe apa pun. Kita perlu mendefinisikannya kecuali tipe lain.

Users.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  answer: PropTypes.bool,
  address: PropTypes.shape({title : PropTypes.string, zipCode: PropTypes.number,}),
};

Users.defaultProps = {
  answer: false,
}