Props React Undefined

Question

I am working on a React Recipe Box project from Free Code Camp. I have a parent component that displays the names of the recipes that it receives as props. The recipe name can be clicked to display the child component, which then has the same attribute passed to the child component to display information about the ingredients. My problem is that when I click on the recipe name, the details in the parent component become undefined. Ive googled up a bunch, but I can't understand why this is happening. Has anyone come across this before?

import React, { Component } from 'react';
import ShowRecipe from './recipeDetail';


class RecipeDetail extends Component {
  constructor(props){
    super(props)
    this.state = {
      isHidden:true
    }
  }

  render() {
    return (
      <div className="card">
        <div className="card-header">
          <h5>

            <button
              className="btn btn-link"
              onClick={() => {
                this.setState({isHidden: !this.state.isHidden})
              }} 
            >
              {this.props.recipe.recipeName}
            </button>

          </h5>
        </div>

        { !this.state.isHidden &&
          <ShowRecipe
            ingredients={this.props.recipe.ingredientsList}
          />
        }
      </div>
    );
  }
}

export default RecipeDetail;

here are the details for RecipeDetail:

import React from 'react';
import RecipeDetail from './recipeDetail';
import { Jumbotron, ListGroup } from 'react-bootstrap';

const RecipeBoxHolder = ({recipes}) =>{

 const recipesItems = recipes.map((recipe) => {
  console.log(recipes);
   return(
     <RecipeDetail
      key={recipe.recipeName}
      recipe={recipe}
     />
  )
 })
 return(
   <div>
    <Jumbotron className="jtron">
     <h5>Recipes</h5>
      <ListGroup>
       {recipesItems}
      </ListGroup>

    </Jumbotron>
   </div>
  )
}

export default RecipeBoxHolder;

TypeError: Cannot read the 'recipipeName' property from undefined RecipeDetail.render SRC / components / recipeDetail.js: 22

     19 |   <button
     20 |     className="btn btn-link"
     21 |     onClick={() => {this.setState({isHidden: 
                !this.state.isHidden})}}  >
   > 22 |      {this.props.recipe.recipeName}
     23 |  </button>
     24 | 
     25 | </h5>

,

    let recipeObject={
       recipeName: this.state.recipe,
       ingredientsList: this.state.ingredients
   };

,   import React, {Component} 'response';   import {ListGroupItem} 'response-bootstrap';

class AddModal extends Component{
  constructor(props){
    super(props)
    this.state={
      recipe: '',
      ingredients: ''
    }
  } 


  render(){
  let recipeObject={
  recipeName: this.state.recipe,
  ingredientsList: this.state.ingredients
};

  return(
    <ListGroupItem>
      <div className="card">
        <div className="card-header">
         <span>Add Recipe</span> <i className="fas fa-utensils"></i>
       </div>
     <div className="card-body">
        <label>Recipe</label>
       <input value={this.state.recipe} onChange={event => 
           this.setState({recipe: event.target.value})} type="text" 
           className="form-control"/>
       <label className="add-ingredients-label">Add Ingredients</label>
          <textarea value={this.state.ingredients} onChange={event => 
          this.setState({ingredients: event.target.value})} 
          className="form-control"></textarea>
      </div>
         <div className="card-footer">
           <button className="close-button btn btn-outline-danger btn- 
                sm">
           Close
              <i className="fas fa-times"></i>
         </button>
         <button onClick={e =>{this.props.addRecipe(recipeObject)}} 
             className="btn btn-outline-success btn-sm">
            Add Recipe
            <i className="fas fa-plus"></i>
        </button>
         </div>
        </div>
    </ListGroupItem>
    );
  }
 }


 export default AddModal;

:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

import RecipeBoxHolder from './components/recipeContainer';
import AddModal from './components/addRecipeModal';
import './style/index.css';
import {Button, Modal} from 'react-bootstrap';

class App extends Component{
  constructor(props){
    super(props);
    this.state={
      recipes:[],
      showAddModal: false
    }
  }

  render(){
    const addRecipe = (recipeObject) =>{
      this.setState(prevState => ({
        recipes:[...prevState.recipes, recipeObject]}
      ))
    }

    return(
      <div className="container">
        <RecipeBoxHolder recipes={this.state.recipes} />
        <Button
          bsStyle="primary"
          bsSize="large">
        </Button>
        <AddModal addRecipe={addRecipe} />
      </div>
    ) 
   }
 }


   ReactDOM.render(<App />, document.getElementById('root'));

Answer 1

@ , , , .

action-action-, . , : https://gist.github.com/femans/22324382a8e04390f6a0ece49b867708

, recipeName , . :

const recipesItems = recipes.map((recipe, key) => { return( <RecipeDetail key={key} recipe={recipe} ...