ReactJS Get values inside dynamic multiple inputs

Question

I have done the dynamic inputs now my problem is getting the values of each inputs but its a multiple inputs? how can I achieve this. here is the jsfiddle.

 perRow() {
        return this.state.values.map((el,i) => 

                <tr key={i}>

                    <td className="col-md-4">
                        <div className="form-group">
                            <input type="text" className="form-control" placeholder="Name" value={el||''} onChange={this.handleChange.bind(this, i)}/>
                        </div>
                        <div className="form-group">
                            <input type="text" className="form-control" placeholder="Hourly Rate" />
                        </div>                        
                        <p><strong>Total hours:</strong> 0:00</p>
                        <p><strong>Total pay:</strong> $0.00</p> 
                            <button className="btn btn-danger do-not-print" onClick={this.removeClick.bind(this, i)}>Remove employee</button>
                    </td>
                    <td>Monday</td>
                    <td><input type="text" className="form-control" /></td>
                    <td><input type="text" className="form-control" /></td>
                    <td><input type="text" className="form-control" /></td>
                    <td>0:00</td>
                    <td>$0.00</td>
                </tr>

        )
    }

https://jsfiddle.net/zd208m1a/2/?utm_source=website&utm_medium=embed&utm_campaign=zd208m1a

Possible duplicate of [dynamic input elements](https://stackoverflow.com/questions/42316604/how-to-implement-a-dynamic-form-with-controlled-components-in-react-js) — Mayank Shukla, Mar 21 '18 at 06:32
dynamic but single elements. I want help for dynamic multiple input elements — Tep Tep, Mar 21 '18 at 06:35
[working fiddle](https://jsfiddle.net/Lsruuec3/), let me know if you have any doubt :) — Mayank Shukla, Mar 21 '18 at 06:47
@MayankShukla Cool! Thanks a lot! Appreciate your help! Yeah I'm missing something! — Tep Tep, Mar 21 '18 at 06:54

Liam · Answer 1 · 2021-03-16T06:17:34.260

First of all, create constructor and we will create an onChange function so we need to bind it inside the constructor

constructor(props){
    super(props);
    this.state = {
        username: '',
        password: '',
    };
    this.onChange = this.onChange.bind(this);
}

Then we need to create onChange function it will handle by the name

onChange(e){
        this.setState({ [e.target.name] : e.target.value });
    }

Finally, call the onChange function with a name attribute, you need to define the input name in the state to avoid any troubles.

<td><input type="text" className="form-control" name="username" onChange={this.onChange} /></td>

<td><input type="text" className="form-control" name="password" onChange={this.onChange} /></td>

2_ Alternative way instead of binding the onChange function in the constructor you can use an anonymous arrow function like so

onChange = (e) => {
        this.setState({ [e.target.name] : e.target.value });
    }

3_ Another Alternative way, you can bind it like so

onChange(e){
   this.setState({ [e.target.name] : e.target.value });
}       

<input 
    type="text" 
    name="username" 
    onChange={this.onChange.bind(this)} 
/>

4_ Another Alternative way with passing data

onChange(e,data){
console.log(data); // result is "something"
   this.setState({ [e.target.name] : e.target.value });
}       

<input 
    type="text" 
    name="username" 
    onChange={(e)=>this.onChange(e, 'something')} 
/>

Please look at my jsfiddle. my problem is on the state i will have multiple username and password — Tep Tep, Mar 21 '18 at 06:13
Do you mean you have two problems? the above answer will let you able to create multi inputs depending on the input attribute name — Liam, Mar 21 '18 at 06:25
yeah I but in my problem is that it is dynamic. Example: in one row I have input for username and password then when I click the button add row I will have another input of username and password. In my current code I have solved the adding of rows of inputs now my problem is getting the values in each object array. — Tep Tep, Mar 21 '18 at 06:29
Okay, I understand you now, you just want to keep the previous data and add new data. Do am right? like [ 'PrevData', 'NewDate', 'NewNew' ] — Liam, Mar 21 '18 at 06:47

score 0 · Accepted Answer · answered Mar 21 '18 at 06:54

Yes you can get your input values like this.state.values.join(', ')

since you got your input values in state values as as array

 handleChange(i, event) {
            let values = [...this.state.values];
            values[i] = event.target.value;
            this.setState({ values });
            console.log(this.state.values)
        }

Checck the below example , this will help you for sure Demo done by mayankshukla

score 0 · Answer 3 · answered Aug 27 '20 at 09:51

Here are the implement using react hook, hope this helps, too.

const [value, setValue] = useState([])

const handleChange = (i, event) => {
 let values = [...value];
 values[i] = e.target.value;

 setValue(values)
 console.log(values)
}

Step to get value inside multiple input text :

Create state with empty element array.
When onChange is runiing...
Copy value state into variable mutable. Example in es6 let values = [...value]
When e.target.value is getting done
Based on index total, value is saved inside values variable
Then, save final values inside value using setValue

ReactJS Get values inside dynamic multiple inputs

3 Answers3