Advertisement
nubilfi

React - sample component

Jan 6th, 2018
98
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import axios from 'axios';
  3. import _ from 'lodash';
  4.  
  5. const ROOT_URL = 'http://localhost:3001/api/v1';
  6.  
  7. const FIELDS = {
  8.     name: {
  9.         type: 'input',
  10.         name: 'nama',
  11.         label: 'Name'
  12.     },
  13.     position: {
  14.         type: 'input',
  15.         name: 'jabatan',
  16.         label: 'Position'
  17.     },
  18.     address: {
  19.         type: 'textarea',
  20.         name: 'alamat',
  21.         label: 'Address'
  22.     },
  23.     phone: {
  24.         type: 'input',
  25.         name: 'telepon',
  26.         label: 'Phone'
  27.     }
  28. }
  29.  
  30. class CreateStaff extends Component {
  31.     constructor(props) {
  32.         super(props);
  33.  
  34.         this.state = {
  35.             fields: {
  36.                 nama: '',
  37.                 jabatan: '',
  38.                 alamat: '',
  39.                 telepon: ''
  40.             }
  41.         };
  42.  
  43.         this.handleSubmit = this.handleSubmit.bind(this);
  44.         this.handleChange = this.handleChange.bind(this);
  45.     }
  46.  
  47.     renderField(fieldConfig) {
  48.         return(
  49.           <div className="form-group" key={fieldConfig.name}>
  50.             <label className="col-sm-2 control-label">{fieldConfig.label}</label>
  51.             <div className="col-sm-10">
  52.               <fieldConfig.type type="text" className="form-control" name={fieldConfig.name} onChange={this.handleChange}/>
  53.             </div>
  54.           </div>
  55.         );
  56.     }
  57.  
  58.     handleChange(e) {
  59.         const state = this.state.fields;
  60.  
  61.         state[e.target.name] = e.target.value;
  62.         this.setState(state);
  63.     }
  64.  
  65.     handleSubmit(e) {
  66.         e.preventDefault();
  67.  
  68.         // get form data out of state
  69.         const { nama, jabatan, alamat, telepon } = this.state.fields;
  70.  
  71.         axios
  72.             .post(`${ROOT_URL}/staff`, { nama, jabatan, alamat, telepon })
  73.             .then((res) => {
  74.                 // do something here
  75.             });
  76.     }
  77.  
  78.     render() {
  79.         // const { nama, jabatan, alamat, telepon } = this.state.fields;
  80.  
  81.         return(
  82.             <div className="container" onSubmit={this.handleSubmit}>
  83.                 <form className="form-horizontal">
  84.                     {/* === Generate fields === */}
  85.                     {
  86.                         _.map(FIELDS, this.renderField)
  87.                     }
  88.                   <div className="form-group">
  89.                     <div className="col-sm-offset-2 col-sm-10">
  90.                       <button type="submit" className="btn btn-success">Save</button>
  91.                     </div>
  92.                   </div>
  93.                 </form>
  94.             </div>
  95.         );
  96.     }
  97. }
  98.  
  99. export default CreateStaff;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement