4. Conditional Rendering

Conditional rendering artinya merender sesuatu berdasarkan kondisi tertentu, mirip pada logika IF. Ada beberapa cara melakukan menyelesaikan hal ini.

1. Membuat Conditional Rendering

app/component/TextInput.tsx

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

const InputText: React.FC<
  InputProps & React.InputHTMLAttributes<HTMLInputElement>
> = ({ messageError = "wajib di isi", 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;

Komponen InputText memiliki props isError yang mana props ini memiliki value boolean, memiliki default value adalah false dan bersifat optional.

Pada JSX kita membuat conditional Rendering dengan kondisi **Jika isError bernilai true maka akan merender props messageError dan jika false maka akan merender <> **

2. Penggil Komponen di 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" isError />
      <InputText
        value={12}
        onChange={() => {
          console.log("ok");
        }}
      />

    </main>
  );
};

export default Home;

3. Jalankan pada Browser

Perhatikan ketika isError bernilai true , maka akan merender pesan error.