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

dynamic but single elements. I want help for dynamic multiple input elements — Tep Tep
– Tep Tep, Commented Mar 21, 2018 at 6:35
@MayankShukla Cool! Thanks a lot! Appreciate your help! Yeah I'm missing something! — Tep Tep
– Tep Tep, Commented Mar 21, 2018 at 6:54

Liam · Accepted Answer · 2021-03-16 06:17:34Z

3

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')} 
/>

edited Mar 16, 2021 at 6:17

answered Mar 21, 2018 at 6:07

Liam

6,8037 gold badges28 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tep Tep Over a year ago

Please look at my jsfiddle. my problem is on the state i will have multiple username and password

Liam Over a year ago

Do you mean you have two problems? the above answer will let you able to create multi inputs depending on the input attribute name

Tep Tep Over a year ago

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.

Liam Over a year ago

Okay, I understand you now, you just want to keep the previous data and add new data. Do am right? like [ 'PrevData', 'NewDate', 'NewNew' ]

Jayavel · Accepted Answer · 2018-03-21 06:54:18Z

0

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

answered Mar 21, 2018 at 6:54

Jayavel

3,4072 gold badges26 silver badges37 bronze badges

Comments

Adoel · Accepted Answer · 2020-08-27 09:51:09Z

0

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

answered Aug 27, 2020 at 9:51

Adoel

11 bronze badge

Collectives™ on Stack Overflow

ReactJS Get values inside dynamic multiple inputs

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related