3. Spread Operator

Spread Operator pada props ...props digunakan untuk menggabungkan semua property defaullt pada tag html menjadi props pada komponen.

A. Membuat Spread Operator

app/component/InputText.tsx

interface InputProps {
  isError?: boolean;
  messageError?: string;
}

const InputText: React.FC<
  InputProps & React.InputHTMLAttributes<HTMLInputElement>
> = ({ messageError, isError = false, ...props }) => {
  return (
    <section>
      <input
        className="w-full h-8 border border-gray-700 rounded px-2"
        {...props}
      />
      {isError ? (
        <p className="text-red-500 font-bold">{messageError}</p>
      ) : (
        <></>
      )}
    </section>
  );
};

export default InputText;

Pada kode di atas, kita menggunakan spread operator pada props dengan cara ...props dijadikan sebagai argument pada komponen. Kemudian pada kita implementasikan pada element input. Hal ini berarti kita bisa menggunakan semua property pada input sebagai props dari komponent TextInput.

Note

• ...props diletakan pada terakhir sama mendefinsikan argument di komponen
• Tambahkan React.InputHTMLAttributes<HTMLInputElement> saat mendefinikasikan argument

2. Memanggil pada komponen app

app/page.tsx

'use client'  // gunakan use client karena ada onChange pda komponen
import Button from "./component/Button";
import InputText from "./component/InputText";
import Latihan from "./component/latihan";
import Note from "./component/Note";

const Home = () => {
  return (
    <main className="space-y-5">
      <h1>Hello World</h1>
      <InputText
        placeholder="username"
        type="text"
        isError
        messageError="Username not empty"
      />
      <InputText placeholder="******" type="passoword" />
      <InputText
        value={12}
        onChange={() => {
          console.log("ok");
        }}
      />
      <Button title="Simpan" isDisabled={false} />
      <Button title="cancel" isDisabled={true} />
      <Note title="Belajar ReactJS" status="warning">
        <p>Saya belajar React</p>
      </Note>
      <Note title="Belajar TypeScript" status="warning">
        <div className="bg-blue-500">
          <p className="text-white">Saya sedang belajar TypeScript</p>
        </div>
      </Note>

      <Note title="Belajar NestJS" status="warning">
        <div className="bg-green-500">
          <p className="text-white">
            Saya sedang belajar NestJS untuk menjadi backend developer
          </p>
        </div>
      </Note>
    </main>
  );
};

export default Home;

Pada kode diatas , terlihat kita memberikan props placeholder , text, onChange pada komponen TextInput. Padahal di Interface InputProps tidak ada , hal ini bisa terjadi karena kita mengimplementasikan ...props pada komponen TextInput.

Note

• props yang diambil dari default property ...props tidak bersifat required saat komponen digunakan.
• Jika ingin menjadikan props wajib saat digunakan tambahkan pada Interface InputProps

3. Jalankan pada Browser