Dynamically rendering values in a reactjs array map

Question

I am building a login form and I am dynamically rendering the input fields using reactjs array map. However, I need to get each user input via the input values. I use states to get the values of each user, but I don't know how to do it dynamically.

Here is my code:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import $ from 'jquery';

const loginForm = [ 
   {
       name: 'email',
       placeholder: 'Email address',
       type: 'text'
   }, 
   {
       name: 'password',
       placeholder: 'Password',
       type: 'password'
   }
]

export class Login extends Component {

constructor(props) {
    super(props);

    this.state = {
        email: '',
        password: ''
    }

    this.getInput = this.getInput.bind(this);
}

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

resetForm = (event) => {
    this.setState({
        email: '',
        password: ''
    });
}

validateForm = (email,password) => {

    if(email == "" || password == "") {
        return false;
    } else {
        return true;
    }
}

render() {

    return (
        <div> 
            <form method="POST" onSubmit={event => this.Login(event)}>
                {loginForm.map( (form,index) => (

                    <div className="form-group">
                        <input type={form.type} name={form.name} className="form-control" placeholder={form.placeholder} value={this.state.form.name} onChange={event => this.getInput(event)}/>
                    </div>
                    ))
                }

                <button type="submit">Sign in</button>
            </form>

        </div>
       );
   }
}

there are perhaps 3 or 4 distinct problems with this code - but which one are you asking about? Short of rewriting the entire thing, I'm not sure anyone could truly help with this. See this guide for more information. — Toby
– Toby, Commented Jan 4, 2019 at 22:39

AngelSalazar · Accepted Answer · 2019-01-04 22:41:45Z

1

<input 
                        type={form.type} 
                        name={form.name} 
                        className="form-control" 
                        placeholder={form.placeholder} 
                        value={this.state[form.name]} 
                        onChange={this.getInput}
                     />

answered Jan 4, 2019 at 22:41

AngelSalazar

3,1131 gold badge19 silver badges24 bronze badges

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

Comments

Trevor · Accepted Answer · 2019-01-04 22:47:09Z

0

I just redid your code. And you're really close.

Just change the value in your <input /> to the below:

value={this.state[form.name]}

The reason - your state looks like this.

state = {
   "email":["[email protected]"],
   "password":["somethingsecure"]}
}

If you try to access this.state.form.name you'll notice that there is no form property in the object, so it will be undefined.

if form.name is 'email' then you need to dynamically access like so:

value={this.state[form.name]} -> value={this.state['email']}

edited Jan 4, 2019 at 22:47

answered Jan 4, 2019 at 22:41

Trevor

1,4743 gold badges16 silver badges33 bronze badges

Collectives™ on Stack Overflow

Dynamically rendering values in a reactjs array map

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related