title: How to get parent props/state from grandchild in reactjs
body: <p>I have a <em>grandparent</em> component that renders a card <em>parent</em> component by mapping over an array. Those parent cards have form <em>children</em>. The call to handle the submit function of the forms is in the <em>grandparent</em>. How can I know from which parent the form is coming?</p>
  
  <p>I read this <a href="https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react?rq=1">SO explainer about the difference between props and state</a> several times, and I think it is possible that I somehow need to get to state instead of props, but when I <code>console.log(this.state)</code> in the <code>handleSubmit</code> function, it is null.</p>
  
  <p>In my contrived example, I have a set of monkeys and a set of cupcakes. The cupcakes include a reference to the monkeys (stored in mongodb and my state), so that each cupcake belongs to one monkey. In order to create a new cupcake, I need to know which monkey it goes with. </p>
  
  <p>I've tried several things, including passing the monkey in the form, adding a hidden field with the monkey (which seems very hackish to begin with and did not work). When I <code>console.log(this.props)</code> in the child form <code>render()</code> method, it shows that <code>monkey</code> is part of the props. However, monkey does not come through in the <code>this.props</code> that is passed through <code>{handleSubmit}</code>. I simply do not understand. </p>
  
  <p><strong>monkeys.js</strong> - the grandparent (the monkey cards are the parents)
  What I really want is for the <code>handleCupcakeSubmit</code> to include information about the monkey, so I can create a new cupcake for that monkey.</p>
  
  <pre><code>import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  
  import MonkeysCupcakes from './monkeyscupcakes';
  import AddCupcakeForm from './add_cupcake_form';
  
  export default class Monkeys extends Component {
      constructor(props) {
          super(props);
          this.handleCupcakeSubmit = this.handleCupcakeSubmit.bind(this);
      }
  
      handleCupcakeSubmit({monkey, color }) {
          console.log("trying to submit a cupcake")
          console.log(this.state)
          console.log('handleSubmitCupcake with', monkey, color);
          // const userid = this.props.monkey.user;
          // const mid = this.props.monkey._id;
          // Eventually, I want to be able to have the userid and monkeyid - both of which are in the monkey props 
          //this.props.createCupcake({ userid, mid, color });
      }
  
      renderMonkeyCupcakes(mid) {
          if (
              this.props.cupcakes !== undefined &amp;&amp;
              this.props.cupcakes.length &gt; 0
          ) {
              console.log("Monkeys is trying to render it's cupcakes");
              const mc = this.props.cupcakes.filter(
                  cupcake =&gt; cupcake.monkeyid === mid
              );
              return &lt;MonkeysCupcakes cupcakes={mc} /&gt;;
          } else {
              console.log('Monkeys has no cupcakes');
          }
      }
      render() {
          return (
              &lt;div&gt;
                  {this.props.monkeys.map((monkey, i) =&gt; (
                      &lt;div key={i} className="card blue-grey darken-1"&gt;
                          &lt;div className="card-content white-text"&gt;
                              &lt;span className="card-title"&gt;{monkey.name}&lt;/span&gt;
                              &lt;p&gt;I am a monkey card&lt;/p&gt;
                              &lt;AddCupcakeForm monkey={monkey}
                                  onSubmit={this.handleCupcakeSubmit}
                              /&gt;
                          &lt;/div&gt;
                          {this.renderMonkeyCupcakes(monkey._id)}
                      &lt;/div&gt;
                  ))}
              &lt;/div&gt;
          );
      }
  }
  Monkeys.propTypes = {
      monkeys: PropTypes.array,
      cupcakes: PropTypes.array
  };
  </code></pre>
  
  <p><strong>add_cupcake_form.js</strong> the child</p>
  
  <pre><code>import React, { Component } from 'react';
  import { reduxForm, Field } from 'redux-form';
  import { connect } from 'react-redux';
  
  import renderTextField from '../helpers/textfield';
  import { createCupcake } from '../../actions';
  
  class AddCupcakeForm extends Component {
  
  
      render() {
          const { handleSubmit } = this.props; // no monkey
          console.log("add cupcake form props", this.props); // this.props.monkey exists
          return (
              &lt;div className="section"&gt;
                  &lt;form onSubmit={handleSubmit}&gt;
                      &lt;Field
                          label="Color"
                          name="color"
                          placeholder="Purple"
                          component={renderTextField}
                          type="text"
                      /&gt;
  
  
                      &lt;button className="btn-large" type="submit"&gt;
                          Add Cupcake
                          &lt;i className="material-icons right"&gt;done&lt;/i&gt;
                      &lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          );
      }
  }
  
  const validate = values =&gt; {
      const errors = {};
  
      if (!values.color) {
          errors.color = 'Please enter cupcake color';
      }
  
      return errors;
  };
  
  export default reduxForm({
      form: 'addcupcake',
      validate
  })(connect(null, { createCupcake })(AddCupcakeForm));
  </code></pre>
  
  <p>My project is on github, the branch with this issue is called <strong>connectcuptomonkeys</strong> which should be <a href="https://github.com/monkeywithacupcake/mern-cupcake/tree/connectcuptomonkeys" rel="nofollow noreferrer">right here</a></p>