Tutorial React JS 3: Logic, Form & State Sharing

Review Singkat Bagian 2

Di bagian sebelumnya kita udah belajar:

Props buat kirim data ke komponen lain
State buat data yang bisa berubah
Event handling kayak klik & input
Looping daftar pakai .map()

Sekarang kita kasih aplikasi kita otak supaya lebih interaktif.

Conditional Rendering (If/Else di React)

Conditional rendering = menampilkan elemen hanya jika kondisi tertentu terpenuhi.

Contoh: Login Sederhana

import React, { useState } from 'react';

function ConditionalExample() {
  const [isLogin, setIsLogin] = useState(false);

  return (
    <div>
      {isLogin ? (
        <h2>Selamat datang, Sam!</h2>
      ) : (
        <h2>Silakan login dulu</h2>
      )}
      <button onClick={() => setIsLogin(!isLogin)}>
        {isLogin ? 'Logout' : 'Login'}
      </button>
    </div>
  );
}

export default ConditionalExample;

Penjelasan:

isLogin menentukan apakah user sudah login atau belum.
{isLogin ? ... : ...} = ternary operator untuk memilih tampilan.

Form & Submit

Form di React dikontrol lewat state, biar data selalu sinkron.

Contoh: Form Input Nama

import React, { useState } from 'react';

function FormExample() {
  const [nama, setNama] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Halo, ${nama}!`);
    setNama(''); // reset input
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={nama}
        onChange={(e) => setNama(e.target.value)}
        placeholder="Ketik nama..."
      />
      <button type="submit">Kirim</button>
    </form>
  );
}

export default FormExample;

Penjelasan:

e.preventDefault() = mencegah halaman reload saat form dikirim.
value di input dikontrol penuh oleh state (controlled component).

Lifting State ke Parent

Kadang, dua komponen butuh berbagi data. Caranya? Naikkan state ke komponen induk.

Contoh: Input & Tampilan Nama

namaInput.js

import React from 'react';

function NamaInput({ onNamaChange }) {
  return (
    <input
      type="text"
      placeholder="Ketik nama..."
      onChange={(e) => onNamaChange(e.target.value)}
    />
  );
}

export default NamaInput;

namaTampil.js

import React from 'react';

function NamaTampil({ nama }) {
  return <h3>Halo, {nama}</h3>;
}

export default NamaTampil;

App.js

import React, { useState } from 'react';
import NamaInput from './NamaInput';
import NamaTampil from './NamaTampil';

function App() {
  const [nama, setNama] = useState('');

  return (
    <div>
      <NamaInput onNamaChange={setNama} />
      <NamaTampil nama={nama} />
    </div>
  );
}

export default App;

Intinya:

State nama ada di App (parent).
NamaInput kirim data ke parent lewat fungsi onNamaChange.
NamaTampil ambil data dari parent.

Fetching API Sederhana

React bisa ambil data dari API eksternal pakai fetch() atau axios. Kita contohkan API publik.

Contoh: Ambil Data User dari API

import React, { useState, useEffect } from 'react';

function FetchExample() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((res) => res.json())
      .then((data) => setUsers(data))
      .catch((err) => console.error(err));
  }, []);

  return (
    <div>
      <h2>Daftar User</h2>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name} - {user.email}</li>
        ))}
      </ul>
    </div>
  );
}

export default FetchExample;

Catatan:

useEffect(() => {...}, []) = jalankan sekali saat komponen pertama kali dimuat.
fetch() ambil data dari URL.
.map() dipakai buat looping hasil API.

Gabungkan Semua

Di App.js, kamu bisa coba panggil semua contoh tadi:

import React from 'react';
import ConditionalExample from './ConditionalExample';
import FormExample from './FormExample';
import FetchExample from './FetchExample';

function App() {
  return (
    <div>
      <h1>Tutorial React JS Bagian 3</h1>
      <ConditionalExample />
      <FormExample />
      <FetchExample />
    </div>
  );
}

export default App;

Kesimpulan Bagian 3

Hari ini kamu udah belajar:

✅ Conditional rendering pakai ternary & if

✅ Form dan event submit

✅ Lifting state untuk berbagi data antar komponen

✅ Fetching API eksternal

Lanjut ke Bagian 4, kita bisa bahas: