https://zalepik.netlify.app

Memunculkan dan Menyembunyikan Elemen Menggunakan UseState di React


Daftar Isi
Share

React merupakan salah satu library JavaScript yang banyak digunakan untuk membuat aplikasi web. Dalam membuat aplikasi web, kadangkala kita ingin memunculkan dan menyembunyikan elemen. Dalam artikel ini, kita akan membahas bagaimana cara memunculkan dan menyembunyikan elemen menggunakan useState di React.

Pertama, kita perlu mengimport library React dan useState dari React dengan menambahkan kode berikut:

  
import React, { useState } from "react";
  

Kemudian, kita dapat membuat state untuk mengetahui apakah elemen harus ditampilkan atau tidak. Dalam hal ini, kita dapat menggunakan useState. Misalnya, kita akan membuat state showElement dengan nilai awal false:

  
const [showElement, setShowElement] = useState(false);
  

Lalu, kita membuat function yang akan mengubah state showElement saat ditekan. Function ini disebut toggleElement:

  
const toggleElement = () => {
  setShowElement((prev) => !prev);
};
  

Function toggleElement menggunakan setShowElement untuk mengubah state showElement ke nilai yang berlawanan. Kita menggunakan (prev) => !prev untuk mengubah state showElement dari false menjadi true dan sebaliknya.

Setelah itu, kita dapat menggunakan kondisional rendering untuk memunculkan atau menyembunyikan elemen. Kita dapat menggunakan syntax {showElement && …} untuk melakukan kondisional rendering. Misalnya, kita akan memunculkan elemen div yang berisi teks “Element” jika showElement bernilai true:

  
{showElement && (
  

Element

)}

Terakhir, kita membuat tombol untuk mengaktifkan function toggleElement:

  

  

Berikut adalah kode lengkap untuk memunculkan dan menyembunyikan elemen menggunakan useState di React:

  
import React, { useState } from "react";

const App = () => {
  const [showElement, setShowElement] = useState(false);

  const toggleElement = () => {
    setShowElement((prev) => !prev);
  };

  return (
    
{showElement && (

Element

)}
); }; export default App;

Pertama, kita mengimport useState dari react dengan sintaks import React, { useState } from “react”;. Kemudian, kita membuat komponen App dengan const App = () => {…}.

Dalam komponen App, kita membuat state showElement menggunakan const [showElement, setShowElement] = useState(false);. State ini berguna untuk menentukan apakah elemen akan ditampilkan atau tidak. Awalnya, elemen akan disembunyikan karena kita menetapkan nilai awal sebagai false.

Kemudian, kita membuat fungsi toggleElement yang digunakan untuk memunculkan dan menyembunyikan elemen. Fungsi ini menggunakan sintaks setShowElement((prev) => !prev); untuk membalikkan nilai dari state showElement dari false menjadi true atau sebaliknya.

Demikian cara memunculkan dan menyembunyikan elemen menggunakan useState di React. Kita juga dapat memanfafatkan UseState ini untuk membuat Navigasi atau Sidebar yang ingin kita sembunyikan atau ingin kita tampilkan.


Sekian, Semoga Bermanfaat!

Jangan lupa share artikel ini ke orang lain, barangkali mereka membutuhkan. Jangan sungkan hubungi kami bila ada pertanyan. Atau silahkan tinggalkan komentar di bawah dan mari kita berdiskusi.

Share

Pennulis:
Ditulis pada:
Lampung, 2023-02-06