8. Conditional Rendering | Belajar React js pemula

8. Conditional Rendering | Belajar React js pemula
Di Posting Oleh : wandi
Kategori : javascript Pemprograman web react

Coditional Rendering React js

Conditional Rendering Pada React js

Didalam react js kita dapat menetukan sebuah componet atau tag html dirender atau tidak pada kondisi tertentu, itu yang disebut Conditional Rendering. Dalam penggunaan Conditional Rendering terdapat dua cara paling umum yang sering digunakan yaitu ternary operator dan menggunakan operator &&.

// ternary
import React, { Component } from 'react';
class App extends Component {
  constructor(){
    super();
 this.state={
      isLoggedIn:true
    }
  }
  render() {
    return (
       <div>
      {this.state.isLoggedIn ? (
        <button>Logout</button>
      ) : (
        <button>Login</button>
      )}
    </div>
    );
  }
}

export default App;

operator &&

import React, { Component } from 'react';
class App extends Component {
  constructor(){
    super();
 this.state={
      isLoggedIn:true
    }
  }
  render() {
    return (
       <div>
      {this.state.isLoggedIn &&
          <h5>selamat datang</h5>
      }
    </div>
    );
  }
}

export default App;

dialam penggunaan operator && component hanya akan dirender jika kondirinya bernilai true
Mau liat atau download source code aplikasi premium bisa disini.

Tweet