Grandchild component (Card.js) can't access Parent component's (App.js) method

1App.js

import Cards from './Components/Cards';
import Forms from './Components/Forms';
import React, { Component } from 'react';
import recipes from './recipes.js'; // mock data
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentName: '',
      currentIngredients: '',
      currentDirections: [],
      recipes: recipes,
      updatingCard: false,
    };
  }

  submitDelete(e) {
    console.log("this is e: ");
    // let removedArr = this.state.recipes;
    // removedArr.splice(e, 1);
    // this.setState({
    //   recipes: removedArr
    // });
  }

  render() {
    return (
      <div className="App">

        <header className="App-header">
          <h1 className="App-title">Recipe React</h1>
        </header>

        {/* updating a card change input styling and handling function */}
        <Forms updating={this.state.updatingCard}/>

        {/* when updating a card show just that card in the cards section*/}
        <Cards
          index={0}
          updating={this.state.updatingCard}
          recipes={this.state.recipes}
          handleDelete={this.submitDelete}
        />

      </div>
    );
  }
}

export default App;

2Cards.js

import Card from './Card';
import React, { Component } from 'react';
import './../App.css';

class Cards extends Component {
  render() {
    if(this.props.updating){
      return (
        <Card 
          recipe={this.props.recipes[this.props.index]} 
          index={this.props.index} 
          handleDelete={this.props.handleDelete}
        />
      )
    }
    return (
      this.props.recipes.map((recipe, index) => {
        return (
          <Card 
            recipe={recipe} 
            index={index} 
            handleDelete={this.props.handleDelete} 
          />
        )
      })
    )
  }
}

export default Cards;

3Card.js

import Button from './Button';
import React, { Component } from 'react';
import './../App.css';

class Card extends Component {
  render() {
    return (
      <div className="Card" key={this.props.index}>
        <h1>{this.props.recipe.name}</h1>
        <h2>Ingredients</h2>
          <ul>
            {this.props.recipe.ingredients.map((ingredient, index) => {
              return (<li key={index}>{ingredient}</li>)
            })}
          </ul>
        <h2>Directions</h2>
          <ol>
            {this.props.recipe.directions.map((direction, index) => {
              return (<li key={index}>{direction}</li>)
            })}
          </ol>
        <br />
        <div>
          <Button type={'delete'} index={this.props.index} onClick={() => this.props.handleDelete(this.props.index)}/>
          <Button type={'update'} index={this.props.index}/>
        </div>
      </div>
    )
  }
}

export default Card;