Outlined TextField - MukeshKumar101/IPL_Auction GitHub Wiki

Problem Statement

To create an outlined textbox as a generic component

Jobs to be Done:

 * Create a functional component 
 * It receives props from the parent component
 * The values are set in the Input tag and label
 * Prototypes are set to the input for checking the type

Heading:

Generic input component

  • @param - props

  • props contain id, type, value, disabled, onChange, checked, onCheckbox, fieldName, and placeholder

  • sample props

const input = [
    {
        type: 'text',
        value: 'John',
        placeholder: " ",
        onChange: function 
    },
    {
 	type: 'radio',
        value: '0' or '1',
        checked: function,
        onChange: function
    },
    {
        type: 'checkbox'
        onCheckbox: function,
        onChange: function
    }

Note:

The label acts as a placeholder in the outlined textbox. so, we will give placeholder as an empty string and give exact field name in the label tag.

  • sample usage
<input
   id={id}
   type={type}
   value={value}
   checked={checked}
   disabled={disabled}
   placeholder={placeholder}
   onChange={onChange}
   fieldName={fieldName}
/>

Implementation Plan:

import the required dependencies

 import React from "react";
 import PropTypes from 'prop-types';

create a function component

const Input = (props) => {
  const { id, type, value, checked, disabled, placeholder, onChange, fieldName } = props;
  return (
    <div>
      <div>
        <input
          id={id}
          type={type}
          value={value}
          checked={checked}
          disabled={disabled}
          placeholder={placeholder}
          onChange={onChange}
        />
        <label>{fieldName}</label> 
      </div>
    </div>
  );
};

Prototypes for the inputs

Input.propTypes = {
  type: PropTypes.string,
  checked: PropTypes.bool,
  disabled: PropTypes.bool,
  value: PropTypes.string,
  onChange: PropTypes.func,
  placeholder: PropTypes.string,
};
export default Input;
⚠️ **GitHub.com Fallback** ⚠️