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

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

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

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

Lalu kita ubah sedikit untuk handleClick nya

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

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

Dan tinggal kita ubah sedikit lagi pada event handleClick nya

Dan hasilnya seperti gambar di bawah ini

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

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.