How to make custom hook of dropdown and input field in React JS

In this article, we are going to learn,How to make custom hook of dropdown and input field in React JS
In this article ,we are going to make the react snippet which allows us to make custom hook of dropdown and input field in React JS of own type with the help of states and hooks.First we have to make the two hooks file with keyword use,one is useInput and other is useDropdown,and then we access these hooks functionality in App.js file

In App.js file,first we have to make a list of options values which is going to be use in dropdown.Now our custom hook requires three arguments(Label,List,state values) .We have the another hook which is useInput ,So assigning required argument is neccessary at start of App.js file. Below in html of App.js file,we have to set two input fields and call function with help of spread operator,This function is derived from custom hook(useInput) .

App.js file is displayed below:

1 import "./styles.css";
2import { useInput } from "./useInput";
3import useDropdown from "./useDropDown";
4import { Button, Form, FormGroup, Label, Input, FormText } from "reactstrap";
5const list = ["1", "2", "3", "4", "5"];
6export default function App() {
7  const [name, bindToInputName, feildName, reset] = useInput("");
8  const [
9    resultname,
10    resultbindToInputName,
11    resultfeildName,
12    resultreset
13  ] = useInput("");
14  const [animal, ListDropdown, statee] = useDropdown("Animals", "", list);
15
16  const handleSubmit = () => {};
17  return (
18    <>
19      <div className="form-details">
20        <div className="user-info">
21          <h3>{name}</h3>
22          <h3>{feildName}</h3>
23        </div>
24        <div className="user-info">
25          <h3>{resultname}</h3>
26          <h3>{resultfeildName}</h3>
27        </div>
28        <form onSubmit={handleSubmit} className="input-form">
29          <div></div>
30          <br />
31          <div></div>
32          <br />
33          <br />
34        </form>
35      </div>
36
37      <br />
38      <br />
39      <Form>
40        <FormGroup>
41          <Label for="exampleEmail">Email</Label>
42          <Input
43            type="email"
44            name="input field"
45            id="exampleEmail"
46            placeholder="with a placeholder"
47            {...bindToInputName}
48          />
49        </FormGroup>
50        <FormGroup>
51          <Label for="examplePassword">Password</Label>
52
53          <Input
54            type="password"
55            name="password"
56            id="examplePassword"
57            placeholder="password placeholder"
58            {...resultbindToInputName}
59          />
60        </FormGroup>
61        <FormGroup>
62          <Label for="exampleSelect">Select</Label>
63          <ListDropdown />
64        </FormGroup>
65        <FormGroup>
66          <Label for="exampleSelectMulti">Select Multiple</Label>
67        </FormGroup>
68
69        <Button onClick={reset}>Email Reset</Button>
70        <br />
71        <br />
72        <Button onClick={resultreset}>Password Reset</Button>
73      </Form>
74    </>
75  );
76}

In useInput hook file,we have the bindToInput function which helps to bind the state with required state,In this function we have the onChange present,So its binds the state when users types some value and then we have the reset function which nulls the state on function call.
useInput.js file is displayed below

1import { useState } from "react";
2export const useInput = (intialValue, fieldname) => {
3  const [feildName, setFieldName] = useState(fieldname);
4  const [value, setValue] = useState(intialValue);
5  const reset = () => {
6    setValue(intialValue);
7  };
8  const bindToInput = {
9    value,
10    onChange: (e) => {
11      setFieldName(e.target.name);
12      setValue(e.target.value);
13    }
14  };
15  return [value, bindToInput, feildName, reset];
16};

In useDropdown file,we have the three arguments one is label name and other is default state and next one is options values which is to be displayed .In this file,we have the dropdownmaker function which done`s all functionality of dropdown and finally return three thing(state, Dropdownmaker, setState).
useDropdown.js file is displayed below

1import React, { useState } from "react";
2export default function useDropdown(label, defaultState, options) {
3  const [state, setState] = useState(defaultState);
4  const Dropdownmaker = () => (
5    <label htmlFor={label}>
6      {label}
7      <select
8        id={label}
9        value={state}
10        onChange={(e) => setState(e.target.value)}
11        onBlur={(e) => setState(e.target.value)}
12        disabled={!options.length}
13      >
14        <option>All</option>
15        {options.map((item) => (
16          <option key={item} value={item}>
17            {item}
18          </option>
19        ))}
20      </select>
21    </label>
22  );
23  return [state, Dropdownmaker, setState];
24}

Styles.css is displayed below:

1:root {
2  --trans-dark: rgba(0, 0, 0, 0.3);
3}
4
5body {
6  padding: 1em;
7}
8
9.App {
10  font-family: sans-serif;
11  text-align: center;
12  display: grid;
13  grid-gap: 1em;
14}
15.counter-container {
16  display: grid;
17  grid-template-columns: repeat(2, 1fr);
18  grid-gap: 1em;
19}
20
21.counter {
22  padding: 1em;
23  border: 1px solid var(--trans-dark);
24}
25
26.form-container {
27  padding: 1em;
28  border: 1px solid var(--trans-dark);
29}
30
31.form-details {
32  display: grid;
33  grid-gap: 1em;
34}
35
36.user-info {
37  border: 1px solid var(--trans-dark);
38}
39
40.input-form {
41  display: grid;
42  grid-gap: 1em;
43}
44
45.input-form > div {
46  display: flex;
47}
48
49.input-form > div > label + input {
50  margin-left: 1em;
51}

Here is the link of live example which we done so far:
Click here