Membuat Reusable Component

contoh code:

1. File1.jsx

import React from 'react'

export const FormCreate = () => {
  return (
    <form>
      <div>
        <label>Field 1</label>
        <input className="" type='text' placeholder="Field 1" />
      </div>
      <div>
        <label>Field 2</label>
        <input className="" type='number' placeholder="Field 2" />
      </div>
      <div>
        <label>Field 3</label>
        <input className="" type='password' placeholder="Field 3" />
      </div>
    </form>
  )
}

Pada contoh diatas terdapat beberapa code yang ditulis berulang dengan format yang sama hanya dibebrapa attribute saja berbedanya yaitu

<div>
  <label>Field 1</label>
  <input className="" type='text' placeholder="Field 1" />
</div>

<div>
  <label>Field 2</label>
  <input className="" type='number' placeholder="Field 2" />
</div>

<div>
  <label>Field 3</label>
  <input className="" type='password' placeholder="Field 3" />
</div>

Dari contoh kasus ini kita bisa membuat component yang reusable dengan menjadikan argumen yang berbeda itu sebagai props

1. Input.jsx

import React from 'react'
  
export const Input = ({label, placeholder, type}) => {
  return (
    <div>
    <label>{label}</label>
    <input className="" type='text' placeholder="Field 3" />
  </div>
  )
}

2. File1.jsx

import React from 'react'
import { Input } from './Input'

export const FormCreate = () => {
  return (
    <form>
      <Input type="text" placeholder="Field 1" label="Field 1" />
      <Input type="number" placeholder="Field 2" label="Field 2" />
      <Input type="password" placeholder="Field 3" label="Field 3" />
    </form>
  )
}

Konsep sederhananya seperti ini, jika ingin lebih paham maksudnya silahkan pelajari pendekatan SOLID pada React untuk best practice nya