Render Bersyarat

Pada React, Anda dapat membuat komponen berbeda yang mencakup perilaku yang dibutuhkan. Lalu, Anda dapat me-render hanya beberapa bagian saja, berdasarkan state dari aplikasi Anda.

Render Bersyarat pada React berfungsi sama halnya dengan operator bersyarat pada Javascript. Gunakan JavaScript operator seperti if atau operator bersyarat untuk membuat representasi elemen dari state saat ini, dan React akan memperbarui UI sesuai dengan state tersebut.

Perhatikan dua komponen ini:

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

Kita akan membuat komponen Greeting yang menampilkan salah satu dari dua komponen diatas berdasarkan pada apakah pengguna telah login:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {    return <UserGreeting />;  }  return <GuestGreeting />;}
const root = ReactDOM.createRoot(document.getElementById('root')); 
// Try changing to isLoggedIn={true}:
root.render(<Greeting isLoggedIn={false} />);

Coba di CodePen

Contoh di atas me-render komponen greeting yang berbeda berdasarkan nilai prop isLoggedIn.

Variabel Elemen

Anda dapat memakai variabel untuk menyimpan element. Hal ini akan membantu Anda me-render beberapa bagian pada komponen secara kondisional sementara output lainnya tidak berubah.

Perhatikan dua komponen baru yang merepresentasikan tombol Logout dan Login:

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

Pada contoh dibawah, kita akan membuat sebuah komponen stateful LoginControl.

Komponen LoginControl akan me-render salah satu dari <LoginButton /> atau <LogoutButton /> berdasarkan state saat ini. Komponen LoginControl juga akan me-render <Greeting /> dari contoh sebelumnya:

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {      button = <LogoutButton onClick={this.handleLogoutClick} />;    } else {      button = <LoginButton onClick={this.handleLoginClick} />;    }
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />        {button}      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<LoginControl />);

Coba di CodePen

Saat mendeklarasikan sebuah variabel dan menggunakan statement if merupakan cara yang baik me-render komponen secara kondisional, terkadang Anda mungkin ingin memakai sintaksis pendek. Ada beberapa cara inline bersyarat pada JSX, dijelaskan dibawah.

Inline If dengan Operator Logis &&

Anda dapat menyisipkan ekspresi apapun pada JSX dengan cara membungkusnya ke dalam kurung kurawal. Juga memasukan operator logis &&. Kurung kurawal dapat berguna untuk memasukan elemen secara kondisional:

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&        <h2>          You have {unreadMessages.length} unread messages.        </h2>      }    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<Mailbox unreadMessages={messages} />);

Coba di CodePen

Ekspresi diatas akan bekerja karena dalam JavaScript, true && expression selalu mengevaluasi true, dan false && expression selalu mengevaluasi false.

Maka dari itu, jika kondisi true, elemen tepat setelah && akan muncul pada output. jika false, React akan mengabaikannya.

Note that returning a falsy expression will still cause the element after && to be skipped but will return the falsy expression. In the example below, <div>0</div> will be returned by the render method.

render() {
  const count = 0;  return (
    <div>
      {count && <h1>Messages: {count}</h1>}    </div>
  );
}

Inline If-Else with Conditional Operator

Metode lain untuk me-render inline elemen secara kondisional ialah menggunakan operator kondisional JavaScript condition ? true : false.

Pada contoh di bawah, kita menggunakan untuk me-render sebagian kecil dari teks secara kondisional.

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.    </div>
  );
}

Ekspresi diatas juga dapat digunakan untuk ekspresi yang lebih besar meski terlihat kurang jelas apa yang terjadi:

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn        ? <LogoutButton onClick={this.handleLogoutClick} />
        : <LoginButton onClick={this.handleLoginClick} />      }
    </div>  );
}

Seperti pada Javascript, Terserah pada Anda untuk memilih gaya yang sesuai dengan apa yang Anda dan tim Anda rasa lebih mudah untuk dibaca. Diingat juga bahwa saat kondisi menjadi terlalu kompleks, mungkin saat tepat untuk mengekstark sebuah komponen.

Mencegah Komponen dari Rendering

Pada kasus yang jarang terjadi, Anda mungkin ingin komponen menyembunyikan dirinya sendiri meskipun komponen itu di-render oleh komponen lain. Untuk melakukan ini, kembalikan null melainkan hasil output render.

Pada contoh dibawah, <WarningBanner /> di-render berdasarkan nilai dari prop yang bernama warn. Jika nilai dari prop false, maka komponen tidak di-render.

function WarningBanner(props) {
  if (!props.warn) {    return null;  }
  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true};
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(state => ({
      showWarning: !state.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<Page />);

Coba di CodePen

Mengembalikan null dari metode render pada komponen tidak akan berdampak pada kerja metode siklus hidup komponen. Contohnya componentDidUpdate akan tetap dijalankan.