Cara membuat condition rendering pada reactjs

Baiklah teman – teman, pada artikel sebelumnya kita sudah belajar tentang Cara merubah state pada react component. Dan juga kita sudah berhasil merubah state dengan fungsi setState, dan kali ini kita akan lanjutkan belajar tentang Cara membuat condition rendering pada reactjs. Kita akan menambahkan state dengan data bolean, dan kita akan buat event click untuk merubah data bolean tersebut. Baiklah silahkan teman – teman tambahkan data bolean di dalam state

Cara membuat condition rendering pada reactjs

Secara default pada state.tampil kita berikan nilai true, nah nilai true inilah yang nantinya kita buat pengecekan. Jika nilai true maka operator increment dan decrement akan tampil, lalu pada saat button hide di click maka operator increment dan decrement akan di hide. Sekarang kita buat button hide

Cara membuat condition rendering pada reactjs

Setelah kita buah kita berikan condition rendering nya pada operator increment dan decrement

Cara membuat condition rendering pada reactjs

Pada script rendering kita menggunkan condition ternary, jika sudah maka hasilnya seperti gambar di bawah ini

Cara membuat condition rendering pada reactjs

Lalu kita ubah sedikit untuk handleClick nya

Cara membuat condition rendering pada reactjs

Maka ketika klik button hide maka operator increment dan decrement akan di hide berdasarkan value state.tampil

Cara membuat condition rendering pada reactjs

Sekarang kita akan tambahkan button show untuk menampilkan operator decrement dan increment nya, silahkan buat button show

Cara membuat condition rendering pada reactjs

Dan tinggal kita ubah sedikit lagi pada event handleClick nya

Cara membuat condition rendering pada reactjs

Dan hasilnya seperti gambar di bawah ini

Cara membuat condition rendering pada reactjs

Ketika klick button hide dan show maka condition rendering akan menampilkan sesuai data state.tampil

Cara membuat condition rendering pada reactjs
Cara membuat condition rendering pada reactjs

Bagaimana, mudah sekali bukan. Untuk script lengkapnya bisa dilihat di bawah ini

import React, {Component} from 'react'

class Home extends Component{
    state ={
        angka:0,
        tampil:true
    }
    handleClick = (e) => {
        if(e === "+"){
            this.setState({
                angka:this.state.angka + 1
            })
        }else if(e === "-"){
            this.setState({
                angka:this.state.angka - 1
            })
        }else if(e === "hide"){
            this.setState({
                tampil:false
            })
        }else{
            this.setState({
                tampil:true
            })
        }
    }

    render(){
        return(
            <div>
                {
                this.state.tampil 
                ? 
                (
                    <div>
                        <h1>{this.state.angka}</h1>
                        <button onClick={() => this.handleClick('+')}>+</button>
                        <button onClick={() => this.handleClick('-')}>-</button>
                    </div>
                ) 
                : 
                (
                    <h1>Hidden</h1>
                )
                }
                

                <button onClick={() => this.handleClick('hide')}>Hide</button>
                <button onClick={() => this.handleClick('show')}>Show</button>
            </div>
        )
    }
}

export default Home

Baiklah teman – teman, sekian pada artikel kali ini tentang Cara membuat condition rendering pada reactjs, tentu kita akan jumpa kembali pada artikel berikutnya. Terimakasih dan sampai jumpa.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *