Membuat Button Toggle (Button Login, Logout) React JS
Bismillah.
Assalamualaikum warahmatullahi wabarokatuhu.
Alhamdulillah, Ashadualla ilaha illallah, wa ashadu annamuhammadarrasulullah.
Kali ini saya akan memberika contoh bagaimana cara membuat button toggle di React Js, jadi ketika kita klik Tombol Login maka Button nya akan berubah menjadi Logout, sebaliknya ketika kita klik tombol logout itu lagi maka dia akan berubah menjadi Login. Mari kita Mulai.
kita kan membuat Project ini dengan menggunakan CRA ( create-react-app ) , pertama pastikan Laptop anda terkoneksi ke Internet lalu ketik perintah di bawah ini di terminal anda :
Lalu lihat code berikut :
Sekian Jika ada yang di tanyakan silahkan
Assalamualaikum warahmatullahi wabarokatuhu.
Alhamdulillah, Ashadualla ilaha illallah, wa ashadu annamuhammadarrasulullah.
Kali ini saya akan memberika contoh bagaimana cara membuat button toggle di React Js, jadi ketika kita klik Tombol Login maka Button nya akan berubah menjadi Logout, sebaliknya ketika kita klik tombol logout itu lagi maka dia akan berubah menjadi Login. Mari kita Mulai.
kita kan membuat Project ini dengan menggunakan CRA ( create-react-app ) , pertama pastikan Laptop anda terkoneksi ke Internet lalu ketik perintah di bawah ini di terminal anda :
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| create-react-app toggle |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react' | |
| export default class App extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = {isToggleOn: true}; | |
| // This binding is necessary to make `this` work in the callback | |
| this.handleClick = this.handleClick.bind(this); | |
| } | |
| handleClick() { | |
| this.setState(prevState => ({ | |
| isToggleOn: !prevState.isToggleOn | |
| })); | |
| } | |
| render() { | |
| return ( | |
| <button onClick={this.handleClick}> | |
| {this.state.isToggleOn ? 'LOGIN' : 'LOGOUT'} | |
| </button> | |
| ); | |
| } | |
| } |
Sekian Jika ada yang di tanyakan silahkan
Tidak ada komentar :
Posting Komentar