Menggunakan Component props

Component props adalah argument pada component yang digunakan untuk passing data. Untuk lebih jelasnya kita langsung menggunakan contoh.

Untuk keperluan tutorial ini, kita tambahkan component baru. Buat file AppHeader.js, lalu tambahkan code berikut

import React, {Component} from 'react'

export default class AppHeader extends Component{
    render(){
        return(
            <h1>{this.props.caption}</h1>
        );
    }
}

Untuk mengakses variable props yang dipasing gunakan perintah this.props.nama_variable, pada contoh digunakan caption

this.props.caption

Lalu modifikasi file index.js dengan menambahkan import AppHeader dan mengganti <h1> menjadi <AppHeader />

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import AppHeader from './AppHeader';
import AppContent from './AppContent';
import AppFooter from './AppFooter';
import './index.css';

class App extends Component{
  render(){
    return(
      <div className='main'>      
          <AppHeader caption='Hello React Props'/>
          <AppContent/>
          <AppFooter/>
      </div>
    );
  }
}

ReactDOM.render(<App/>, document.getElementById('root'))

Perhatikan saat menggunakan component AppHeader, terdapat argument caption yang akan dipasing ke class component AppHeader.

Dengan penggunaan props, component menjadi lebih reusable, karena kita bisa passing value sesuai kebutuhan.

Jika kita periksa pada browser, sesuai ekspektasi, header akan ditampilkan sesuai value caption.

Multi props

Jika props yang akan dipassing lebih dari satu, kita dapat menggunakan javascript object.

Perhatikan bagian statment const myProps dan saat digunakan pada AppHeader digunakan spread operator.

Sementara pada class AppHeader cara mengakses tidak ada perubahan.

class App extends Component{
  render(){
    const myProps = {
      caption : 'Hello react props 2',
      param2 : 'Ini param kedua'
    }

    return(
      <div className='main'>      
          <AppHeader {...myProps}/>
          <AppContent/>
          <AppFooter/>
      </div>
    );
  }
}