lifelong learner — urip iku urup, currently working on accenture.

React – Conditional rendering

0
Degananda.com -

Setiap komponen yang kita buat tentunnya tidak selalu dibutuhkan. Misalnya komponen loading hanya akan kita lakukan render pada DOM jika pada saat itu proses pengambilan data melalui http sedang berlangsung. Bagaimana proses conditional rendering pada react ? simak ulasan berikut ini

Selayang pandang

Terdapat beberapa metode yang dapat digunakan untuk melakukan conditional rendering. Kita perlu melakukan conditional rendering dikarenakan untuk mengoptimalkan performa dari aplikasi. Bayangkan jika kita hanya melakukannya melalui css (set display none/block/inline/dsb). Sesungguhnya melakukan hide elemen melalui css tidak akan menghilangkannya melalui DOM.

Oleh karena itu, jika ingin meniadakan/mengadakan elemen perlu melakukannya melalui metode conditinal rendering yang telah di sediakan oleh react. Metode tersebut dibagi berdasarkan cara penggunaannya. Tentunnya hal ini akan memberikan kita kebebasan melakukan conditional rendering sesuai dengan kondisi yang kita hadapi. Berikut ini adalah daftar metode conditional rendering yang ada pada react

Nama Metode Deskripsi / penjelasan
Menggunakan conditional operator kita akan menggunakan “if” untuk melakukan conditional rendering layaknya melakukan logical operator. Jika ingin menampilkan kita akan return komponen tersebut , jika tidak ingin menampilkan akan kita return ” (kosong bukan null). Nilai yang digunakan pada logical operator dapat berupa props ataupun hanyalah local variabel pada class
Element variable melakukan conditional rendering dengan “if” namun menggunakan data dari “state”. Dengan menggunakan state kita dapat melakukan render secara parsial (lebih dinamis). Karena dengan state kita dapat membagi bagian mana yang ingin di render
inline if sama halnya dengan metode menggunakan conditional operator namun bedannya kita menuliskannya secara inline dan tanpa kondisi “else”
inline if else sama halnya metode inline if hanya saja dengan menggunakan kondisi “else”.
null rendering kita dapat membuat suatu komponen hilang meski komponen tersebut sedang dirender oleh orang lain dengan cara mereturn “null” (bukan kosong).

Kita akan membahas masing-masing metode tersebut beserta cara mengimplementasikannya (coding). Dua komponen yang terlibat adalah

  1. Komponen note , yakni komponen yang menampilkan data note.
  2. Komponen loading, yakni komponen yang menampilkan sebuah spinner.

Kita tidak akan menggunakan http tapi akan kita buah state yang seolah-olah sedang melakukan request pada server dan terdapat variabel yang menyimpan boolean data tersebut sedang diproses ataukah sudah selesai(finish/done).

Implementasi

1. Conditional operator

Suppose kita memilki stateless(komponen yang tidak memiliki state) komponen seperti berikut ini.

class Header extends Component {

  render() {
    return (
      <h1> ini head </h1>
    );
  }

}

class Content extends Component {

  render() {
    return (
      <h1> ini Content </h1>
    );
  }

}

Melakukan conditional rendering dengan operator dapat kita lakukan layaknya melakukan if seperti biasannya. Nilai yang digunakan dalam operator dapat berasal dari local variabel (konstanta) ataupun dari props. Jika ingin menggunakan state dapat melihat dibagian 2 mengenai element variable. Contohnya adalah seperti berikut ini

render() {
  const displayContent = false;
  if(displayContent){
    return <Content />
  } else {
    return <Header />
  }
}

kode diatas jika dijalankan akan menghasilkan tampilan seperti berikut

2. Element variable

Element variable melibatkan stateful component artinya komponen tersebut memiliki state. Dengan menggunakan state proses conditional rendering akan semakin dinamis. Dikarenakan melalui state kita dapat membuat variabel-variabel penentu apakah suatu komponen tersebut harus ditampilkan / dirender atau tidak. Contohnya kita memiliki dua komponen ini

class Header extends Component {

  render() {
    return (
      <h1> ini head </h1>
    );
  }

}

class Content extends Component {

  render() {
    return (
      <h1> ini Content </h1>
    );
  }

}
render() {
  const displayContent = false;
  if(displayContent){
    return <Content />
  } else {
    return <Header />
  }
}

Komponen tersebut akan ditampilkan sesuai dengan statenya. Komponen <showme> akan muncul apabila state adalah true , sedangkan komponen <hideme> akan muncul jikai state bernilai false. Memang hal ini sama dengan saat melakukannya dengan menggunakan conditional operator hanya saja nilai yang digunakan dalam operator tersebut berasal dari state.

constructor(props){
  super(props);
  this.state = {
    displayHead : true,
    displayContent : false
  }
}


render() {
  if(this.state.displayHead){
    return <Header />
  }

  if(this.state.displayContent){
    return <Content />
  }

}

Kode diatas jika dijalankan akan menghasilkan tampilan seperti ini

3. Inline if

menuliskan conditional dengan menggunakan dua metode diatas mungkin sedikit melelahkan karena membutuhkan banyak sekali line of code. Kita dapat meringkasnya dalam satu line saja contohnya adalah sebagai berikut ini

constructor(props){
  super(props);
  this.state = {
    displayHead : true,
    displayContent : false
  }
}


render() {
  return (
    <div>
    {
      this.state.displayHead &&
      <Header />
    }
    </div>
  );
}

kode diatas jika dijalankan akan menghasilkan

4. Inline if else

kita juga dapat menuliskan if else dalam satu line, hal ini akan meringkas banyak sekali line of code. berikut ini adalah contoh melakukan if else (dalam konteks conditional rendering).


constructor(props){
  super(props);
  this.state = {
    displayHead : true,
    displayContent : false
  }
}


render() {
  return (
    <div>
    {
      this.state.displayHead ? <Header /> : <Content />
    }
    </div>
  );
}

kode diatas jika dijalankan akan menghasilkan

5. Null rendering

conditional rendering juga dapat dilakukan chaining. Maksutnya adalah komponen yang berada dalam komponen yang sedang dirender juga dapat dihilangkan. Istilahnya adalah menghilangkan komponen yang berada didalam suatu komponen yang dirender. Hal ini sangat mungkin karena setiap komponen dapat secara mandiri untuk dirender. Meski secara defaultnya mengikuti parentnya. Misalnya kita memiliki komponen berikut

class Header extends Component {

  render() {
    return (
      <Content />
    );
  }

}

class Content extends Component {

  render() {
    return (
      <h1> ini Content </h1>
    );
  }

}

kita ingin komponen child tersebut tidak muncul saat parent tersebut dirender maka yang harus kita lakukan adalah

class Header extends Component {

  render() {
    return (
      <Content displayContent="true" />
    );
  }

}

class Content extends Component {

  constructor(props){
    super();
  }

  render() {
    if(this.props.displayContent == "true"){
      return (
        <div>
          ini content
        </div>
      )
    } else {
      return null;
    }
  }

}

class App extends Component {
// tutorial

render() {
  return (
    <Header />
  );
}
}

kode diatas jika jalankan akan menghasilkan tampilan