sick-sad-world
3/3/2017 - 8:53 AM

Simple functional Input component

Simple functional Input component

import React from 'react'

export default function Input(props) {
  props = {
    className: 'form-input-text',
    label: null,
    type: 'text',
    onChange: (e) => console.log('Change:', e.target.id, e.target.name, e.target.value);
    id: null,
    ...props
  };
  
  if (!props.id) {
    throw new Error('ID is requried property - please set uniq id for input');
  }
  
  return (
    <div className={props.className}>
      {(props.label) ? <label htmlFor={props.id}>{props.label}</label> : null}
      <input
        type={props.type}
        name={props.name}
        id={props.id}
        value={props.value}
        onChange={props.onChange}
      />
    </div>
  );
}