Getting Parent props inside Redux form child

Question

React Newbee Here using react redux and redux-form

I want to use data retrieved by App.js inside Form.js Currently I am passing {this.props.data} to <Form /> I can't see or access the App.js props inside <Form /> component , Instead I can just see reduxForm Props , How can I access this.props.data inside <Form /> ?

I have a component where I am fetching the user data :

App.js

import React, { Component } from "react";

import { connect } from "react-redux";

import * as actions from "../actions";

import Form from "./Form";

class Questions extends Component {
    componentDidMount() {
        this.props.fetchQuestion();
    }
    render() {
        return <Form formData={this.props.data} />;
    }
}
function mapStateToProps({ data }) {
    return { data };
}
export default connect(mapStateToProps, actions)(Questions);

Form.js

import React, { Component } from "react";
import { connect } from "react-redux";
import { Field, FieldArray, reduxForm } from "redux-form";
import * as actions from "../actions";

class renderForm extends Component {
  renderField({ input, label, type, meta: { touched, error } }) {
    return (
      <div>
        <label>{label}</label>
        <div>
          <input {...input} type={type} placeholder={label} />
          {touched && error && <span>{error}</span>}
        </div>
      </div>
    );
  }
  render() {
    const { handleSubmit, pristine, reset, submitting } = this.props;

    return (
      <form onSubmit={handleSubmit}>
        <Field
          name="clubName"
          type="text"
          component={this.renderField}
          label="Club Name"
        />
        <FieldArray name="questions" component={this.renderQuestion} />
        <div>
        </div>
      </form>
    );
  }
}

function mapStateToProps({ data }) {
  return { data };
}

export default reduxForm({
  form: "fieldArrays"
})(connect(mapStateToProps, { actions })(FieldArraysForm));

Dyo Dyo · Accepted Answer · 2018-02-28T15:46:42

In your case you should only use the reduxForm HOC without connecting to redux (connect() wrapper) :

export default reduxForm({
  form: "fieldArrays"
})(renderForm);

In your form you can access the data from the parent using this.props.formData;

Getting Parent props inside Redux form child

2 Answers