handle dynamic input field

Handle multiple and dynamic input fields

We'll  learn here, How to create a Multiple Input fields handler.

Let's start,

Note : You can clone this app from GitHub click me to get link 

1. We create a React App.

npx create-react-app multiple-input-fields

cd multiple-input-fields




2. App.js file

import React from "react";

import Input from "./input";

import "./App.css";

export default function App() {

const [result, setResult] = React.useState(0);

const [arr, setArr] = React.useState(2);

const [inputData, setInputData] = React.useState({});

const NextField = () => {

if (arr < 10) {

setArr(arr + 1);

} else {

alert(

"Sorry, You have exceeded the limits of input fields

        \n Not allowed more than 10 input fields"

);

}

};

const vals = Object.values(inputData);

const handleClick = () => {

let total = 0;

vals.map((item) => setResult((total += parseFloat(item))));

setResult(total);

};

return (

<div className="main-div">

<div className="border">

<div style={{ padding: ".5rem" }}>

<h3>Hadle Multiple Input Fields</h3>

<h5>Summation of all input values</h5>

<div>{result === 0 ? 0 : parseFloat(result).toFixed(2)}</div>

<Input arr={arr} inputData={inputData} setInputData={setInputData} />

<button onClick={handleClick}>Calculate</button>

<button onClick={NextField}>Next field</button>

</div>

</div>

</div>

);

}

 3. input.js file.

import React from "react";

const Input = React.forwardRef(({ arr, inputData, setInputData }, ref) => {

const handleInputChange = (e) => {

const { name, value } = e.target;

setInputData({

...inputData,

[name]: value,

});

};

const array = [];

for (let i = 0; i < arr; i++) {

array.push(i);

}

return (

<>

{array.map((item, i) => (

<div key={i}>

<input

name={i + 1}

type="number"

ref={ref}

value={inputData.name}

onChange={(e) => handleInputChange(e)}

/>

</div>

))}

</>

);

});

export default Input;

4. App.css file.

.App {

font-family: sans-serif;

text-align: center;

display: flex;

justify-content: center;

align-items: center;

min-height: 100%;

}

.border {

border: 1px solid grey;

border-radius: 4px;

background-color: rgb(205, 230, 251);

}

input {

border-radius: 3px;

border: 1px solid grey;

margin: 4px;

padding: 2px 6px;

font-size: 0.8rem;

background-color: hsla(180, 100%, 50%, 0.2);

width: 85%;

}

input[type="number"]::-webkit-inner-spin-button,

input[type="number"]::-webkit-outer-spin-button {

-webkit-appearance: none;

}

input[type="number"] {

-moz-appearance: textfield;

}

input:focus {

outline: none;

border: 1px solid rgb(0, 8, 255);

}

.input-wrapper {

padding: 1rem;

}

button {

border: 0;

margin: 4px;

border-radius: 4px;

color: white;

background-color: red;

font-size: 0.8rem;

padding: 4px 8px;

cursor: pointer;

font-weight: 600;

font-family: system-ui;

}

button:hover {

background-color: green;

}

h3 {

color: #800000d9;

margin: 6px;

font-weight: 500;

}

h5 {

color: rgb(67 63 245);

margin: 6px;

font-weight: 500;

}

div {

text-align: center;

}

.main-div {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

}

5. index.js file

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById('root')

);

reportWebVitals();

online run code, click on the Run Code

Run Code

for vs code

npm start

Output :

Contact us : harish.git2177@gmail.com

Thank you for visited us.