Chrome Extension

Create a simple Login Form using Redux Form

Here is a simple login redux form example that you can use in your react app directly.
import React, { Component } from 'react'
import { reduxForm, Field } from 'redux-form'

const renderInput = field =>   // render input and errors
    <div>
        <input {...field.input} type={field.type}/>
        { field.meta.touched && field.meta.error &&
            <span className="error">{field.meta.error}</span>
        }
    </div>

class LoginForm extends React.Component {
    render() {
        const { handleSubmit } = this.props

        return (
            <form onSubmit={handleSubmit}>
                <div className="ctrl_group">
                    <label htmlFor="username">Username</label>
                    <Field
                        name="username"
                        component={renderInput}
                        type="text"/>
                </div>

                <div className="ctrl_group">
                    <label htmlFor="password">Password</label>
                    <Field
                        name="password"
                        component={renderInput}
                        type="password"/>
                </div>

                <button type="submit">Submit</button>
            </form>
        )
    }
}

export default reduxForm({
  form: 'LoginForm'
})(LoginForm)
Code faster with devsheet chrome extension and increase productivity as a programmer
search code from your favorite search engine instantly.
Install Now

To use redux forms you need to import them from the redux-form package and then create the structure of the form.

Search Index Data (The code snippet can also be found with below search text)

form example redux form
Was this helpful?
0 Comments
Open Code Manager We are hiring