StephenGrider / ReduxSimpleStarter

Starter pack for an awesome Udemy course

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Redux-form submit buttom

grisena opened this issue · comments

import React, { Component } from 'react';
import { reduxForm } from 'redux-form';
import { createPost } from '../actions/index';

class PostsNew extends Component {
render() {
const { fields: {title, categories, content}, handleSubmit } = this.props;

return(
  <Form onSubmit ={ handleSubmit(this.props.createPost) }>
    <h3> Create A New Post </h3>
    <div className ={ `form-group ${ title.touched && title.invalid ? 'has-danger' : '' }`>
     <label> Title </label>
     <input type ="text" className="form-control" {...title} />
      <div className="text-help">
        {title.touched ? title.error : ''}
      </div>
    </div>

   <div className ={ `form-group ${ categories.touched && categories.invalid ? 'has-danger' : '' }`>
     <label> Categories </label>
     <input type ="text" className="form-control" {...categories} />
     <div className="text-help">
       {categories.touched ? categories.error : ''}
     </div>
    </div>

    <div className ={ `form-group ${ content.touched && content.invalid ? 'has-danger' : '' }`>
     <label> Content </label>
     <textarea type ="text" className="form-control" {...content} />
     <div className="text-help">
       {content.touched ? content.error : ''}
     </div>
    </div>

    <button type="submit" className="btn btn-primary"> Submit </button>
  </Form>
);

}
}
function validate(values){
const errors ={};

if(!values.title) {
errors.title = 'Enter a username';
}

if(!values.categories) {
errors.categories = 'Enter categories';
}

if(!values.content) {
errors.content = 'Enter some content';
}
return errors;

}

export default reduxForm ({

form: 'PostsNewForm',
fields: ['title','categories','content'],
validate,
onSubmit: () => { }
},null,{createPost}) (PostsNew);

HELP PLEASE!!!
Submit button seems to not work and also the validation.

use version "redux-form": "^5.3.6", it will definately solve the problem

You have another error in
<div className ={ form-group ${ title.touched && title.invalid ? 'has-danger' : '' }>
CHANGE TO
<div className ={ form-group ${ title.touched && title.invalid ? 'has-danger' : '' }}>
You forget }

CODE: posts_new.js IN LINE{23, 33, 43}
https://github.com/justlearncode/react-redux-add-postsReduxSimpleStarter-issues-254/blob/master/posts_new.js