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)
Best JSON Validator, JSON Tree Viewer, JSON Beautifier at same place. Check how cool is the tool

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