Props dan Parent

Props :

//props.d.ts

export type Utamaprops = {
    nama : string;
    umur : number;
}

Parent :

//App.tsx

import './App.css'

import { useState } from 'react'

import type { Utamaprops } from './types/props.d.ts'

const data: Utamaprops = {
  nama : 'Ujang',
  umur : 25
}

function App() {

  const handleClick = () => {
    alert(`Halo ${data.nama}, umur kamu ${data.umur} tahun`)
  }

  return (
    <>
      <h1>Vite + React</h1>
      <p>Nama : {data.nama} </p>
      <p>Umur : {data.umur} </p>
      {data.umur >= 18 ? (
        <p>Status: Dewasa</p>
      ) : (
        <p>Status: Belum Dewasa ❌</p>
      )}
      
      <button onClick={handleClick}>
        Click
      </button>
      
    </>
  )
}

export default App

State :

//App.tsx

import { useState } from 'react'
import './App.css'

import type { Utamaprops } from './types/props.d.ts'

const initData: Utamaprops = {
  nama: 'Ujang',
  umur: 25
}

function App() {

  const [data, setData] = useState(initData)

  const handleTambahUmur = () => {
    setData({ ...data, umur: data.umur + 1 })
  }

  return (
    <>
      <h1>Vite + React</h1>
      <p>Nama : {data.nama}</p>
      <p>Umur : {data.umur}</p>

      {data.umur >= 18 ? (
        <p>Status: Dewasa</p>
      ) : (
        <p>Status: Belum Dewasa</p>
      )}

      <button onClick={handleTambahUmur}>
        Tambah Umur
      </button>
    </>
  )
}

export default App