> For the complete documentation index, see [llms.txt](https://asamarsal.gitbook.io/notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://asamarsal.gitbook.io/notes/personal-documentation/template-react-js-+-vite-+-typescript/props-dan-parent.md).

# Props dan Parent

Props : 

```tsx
//props.d.ts

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

Parent : 

```tsx
//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 :

<pre class="language-tsx"><code class="lang-tsx">//App.tsx
<strong>
</strong><strong>import { useState } from 'react'
</strong>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 (
    &#x3C;>
      &#x3C;h1>Vite + React&#x3C;/h1>
      &#x3C;p>Nama : {data.nama}&#x3C;/p>
      &#x3C;p>Umur : {data.umur}&#x3C;/p>

      {data.umur >= 18 ? (
        &#x3C;p>Status: Dewasa&#x3C;/p>
      ) : (
        &#x3C;p>Status: Belum Dewasa&#x3C;/p>
      )}

      &#x3C;button onClick={handleTambahUmur}>
        Tambah Umur
      &#x3C;/button>
    &#x3C;/>
  )
}

export default App

</code></pre>