I have a trouble with redux-forms. When the form is submitted, the data object is empty. There are just an input and a submit button. Here is the code and I cannot understand what I am doing wrong.
In Search view:
render() {
const {submitSearchForm} = this.props;
return (
<div>
<SearchForm onSubmit={submitSearchForm}/>
</div>
);
}
And in Search form:
renderTextField = ({input, placeholder, leftIcon, rightIcon, clickableIcon, width}) => {
return <TextField placeholder={placeholder}
leftIcon={leftIcon}
rightIcon={rightIcon}
clickableIcon={clickableIcon}
width={width}
{...input}/>;
};
render() {
const {handleSubmit, fields} = this.props;
return (
<div className="row">
<form onSubmit={handleSubmit}>
<Field name="searchText"
component={this.renderTextField}
placeholder="Enter title and/or skills"
leftIcon="icon-search"
width={424}
field={fields.searchText}/>
<Button type="default"
label="go"
size="medium"
isSubmitButton={true}/>
</form>
</div>
);
}
And this is how I connect reduxForms with the SearchForm:
const reduxSearchForm = reduxForm({
form: "Search",
fields: ["searchText"]
});
export default(reduxSearchForm(SearchForm));
After checking everything by the documentation, I found out that the problem was when combining reducers. It is very important to map the formReducer to form. Here it is:
export const reducer = combineReducers({
form: formReducer,
search
});