How to create reusable input field in react Js

by

Reusable input fields in React are custom components that encapsulate input elements and their behavior, allowing you to easily incorporate consistent and customizable form inputs throughout your application, enhancing maintainability and code reusability.

For example, creating a DatePicker component that handles date selection with a consistent UI across different parts of your app.

Input Field Component

This code defines a reusable input field component that can be customized with labels, input types, initial values, and event handlers for value changes. It encapsulates the HTML structure and behavior of an input field with a label.

To use this InputField component in your application, you would import it and pass the required props (label, type, value, and onChange) to customize its behavior and appearance. When rendered, it will display an input field with a label, and any changes in the input field’s value will trigger the specified onChange function

File Name – InputField.js

import React from 'react';

const InputField = ({ label, type, value, onChange }) => {
  return (
    <div>
      <label>{label}</label>
      <input type={type} value={value} onChange={onChange} />
    </div>
  );
};

export default InputField;
  • The code defines a React functional component named InputField.
  • It accepts four props: label, type, value, and onChange.
  • The label prop represents the label associated with the input field.
  • The type prop defines the type of input field (e.g., text, number).
  • The value prop sets the current value of the input field.
  • The onChange prop specifies a function to be called when the input field’s value changes.
  • The component renders a <div> containing a <label> and an <input> element.
  • The <label> displays the label prop.
  • The <input> element uses the type and value props for configuration.
  • The onChange prop is attached to the <input> to handle changes in the input field.
  • The InputField component is exported as the default export, making it usable in other parts of a React application.

Use Reusable Input Field Component

You have created an InputField component, you can reuse it multiple times by passing its required props – label, type, value & onChange.

This code is a React component that showcases the usage of reusable form input components. It includes input fields for “Full Name,” “Email,” “Username,” and “Password,” and it uses the useState hook to manage their respective values. Users can enter data into these input fields, and the component handles changes in real-time.

File Name – App.js

import React, { useState } from 'react';
import InputField from './InputField';

const App = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <div>
      <h1>Reusable Form Components Example</h1>
      <InputField label="Name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <InputField label="Email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <InputField label="Name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <InputField label="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
    </div>
  );
};

export default App;