Redux Form props not displaying in event handler

Question

I am building a very simple front end app to connect a few API's. I have a redux form that should trigger an event handler which then triggers an action creator. The event handler is not receiving any props at present (just getting an empty object). This is my component

import React, { Component } from 'react'
// import { Link } from 'react-router'
import { reduxForm } from 'redux-form'
import fetchConcerts from '../actions/fetchConcerts.js'

class ListContainer extends Component {

  handleFormSubmit(formProps){
    event.preventDefault()
    debugger
    this.props.fetchConcerts(formProps)

  }


  render(){
    const { fields: { userCity, userDate }, handleSubmit } = this.props;


        return (
            <div>
            <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))} >
                <label>City</label>
                <input type="text" className="form-input" {...userCity} />
                <label>Date</label>
                <input type="text" className="form-input" {...userDate} />
                <input type="submit" value="Submit" />
            </form>
            </div>
        );
      }
    }


export default reduxForm({
      form: 'search',
      fields: ['userCity', 'userDate']
    }, null, { fetchConcerts })(ListContainer);

App.js (the parent component) is as follow-->

import React, { Component } from 'react';
import ListContainer from './containers/ListContainer.js'
import './App.css';

export default class App extends Component {


  render() {
    return (
      <div className="App">
        <ListContainer />
      </div>
    );
  }
}

Upon submit, the handleFormSubmit is kicked off and I hit my debugger but formProps is Object = {}

Any ideas? I have run into this problem quite a bit with redux forms but I can never really figure out where I'm going wrong.

Thanks

Answer 1

Are you trying to access the values entered in the input fields? If yes, this may be helpful:

handleFormSubmit(event) {
  event.preventDefault();

  // Access value and attributes of the City input
  console.log(event.target.elements[0].value);
  console.log(event.target.elements[0].attributes);

  // Access value and attributes of the Date input
  console.log(event.target.elements[1].value);
  console.log(event.target.elements[1].attributes);    
}

A working demo here: http://codepen.io/PiotrBerebecki/pen/vXXXaJ

Answer 2

Although i haven't used redux-form , I think the issue is with your code, You can change your <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))} > to

<form
    onSubmit={ (event) => {
            handleSubmit( this.handleFormSubmit.bind(this, event, formProps) );
        }
    }
>

And your handleFormSubmit function to

handleFormSubmit(event, formProps){
    event.preventDefault()
    debugger
    this.props.fetchConcerts(formProps)
}

EDIT #1

After going through redux-form documentation, you could change the form to

<form
    onSubmit={ (event) => {
            handleSubmit( data => { this.handleFormSubmit.bind(this, event, data) } );
        }
    }
>

And it should work.

---

And to simplify things even further

You can change your form component code to

<form onSubmit={ handleSubmit( data => { this.handleFormSubmit.bind(this, data) } ) } >

And handleFormSubmit function to

handleFormSubmit(data){
    console.log('form data', data);
    this.props.fetchConcerts(data)
}