DEV Community

Radheshyam Gupta
Radheshyam Gupta

Posted on

How to handle multiple Same inputs box in React for Bulk Data Insert With Use of useRef Hook?

How to get Custom attributes value in React With Use of useRef Hook ?
How to Change Input Box defaultValue In React Js using useRef() Hook ?

In this Post, we will learn about how to handle multiple input Box defaultValue using useRef() React Hook.

1)onInputChange() Function

const onInputChange = (e) => {

        ref.current[parseInt(e.currentTarget.attributes['refindex'].value)].value =e.target.value;


    }
Enter fullscreen mode Exit fullscreen mode

How to get All Input Box Value and Store in Array ?

1)ShowValue() Function

const ShowValue = () => {

        const myInputValue = [];
        for (let i = 0; i < ref.current.length; i++) {

            myInputValue.push({
                [ref.current[i].name]: ref.current[i].value
            })

        }
        console.log(myInputValue);
    }
Enter fullscreen mode Exit fullscreen mode

How to Clear All Input Box Value ?

1)ClearValue() Function

const ClearValue = () => {

        for (let i = 0; i < ref.current.length; i++) {

            ref.current[i].value = 0;
        }

    }
Enter fullscreen mode Exit fullscreen mode

Finally We Completed our Requirement

1)App.js

import './App.css';
import React, { useRef } from 'react';

function App() {

    const ref = useRef([]);

    const onInputChange = (e) => {

        ref.current[parseInt(e.currentTarget.attributes['refindex'].value)].value =e.target.value;


    }

    const ShowValue = () => {

        const myInputValue = [];
        for (let i = 0; i < ref.current.length; i++) {

            myInputValue.push({
                [ref.current[i].name]: ref.current[i].value
            })

        }
        console.log(myInputValue);
    }
    const ClearValue = () => {

        for (let i = 0; i < ref.current.length; i++) {

            ref.current[i].value = 0;
        }

    }


  return (
      <>
          <div style={{ width: '50%', backgroundColor: '#f7f4f3', marginLeft: '150px', marginTop: '100px', padding: '50px 0px 100px 50px' }}>
              <label><b>Money</b></label>  <input ref={(element) => { ref.current[0] = element }} refindex={0} name='ModeyValue' defaultValue='123464' type='text' onChange={onInputChange} /> <br />
              <label><b>Money</b></label>  <input ref={(element) => { ref.current[1] = element }} refindex={1} name='ModeyValue' defaultValue='123' type='text' onChange={onInputChange} /> <br />
              <label><b>Money</b></label>  <input ref={(element) => { ref.current[2] = element }} refindex={2} name='ModeyValue' defaultValue='1' type='text' onChange={onInputChange} /> <br />
              <label><b>Money</b></label>  <input ref={(element) => { ref.current[3] = element }} refindex={3} name='ModeyValue' defaultValue='1234' type='text' onChange={onInputChange} /> <br />

              <button style={{ padding: '5px', backgroundColor: 'green', border: 'none', margin: '5px 5px 5px 5px' }} onClick={ShowValue}>Check All Input Value in Form of Array</button>

              <button style={{ padding: '5px', backgroundColor: 'red', border: 'none', margin: '5px 5px 5px 5px' }} onClick={ClearValue}>Clear all Input Value</button>
          </div>
      </>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Well done! Finally We Store All InputBox Value in Array!

Drop some love by liking or commenting ♥

Reference w3schools

Download Source Code from GitHub Repository

Top comments (0)