javascript - Show/Hide (sub) list items with React JS

In a React JS component I am rendering a list of items (Recipes), using JS map function from an array, passed in from a App parent component. Each item has a sub list (Ingredients), again rendered using map function.

What I want is to show/hide the sub list of Ingredients when you click on the Recipe title. I use a onClick function on the title that sets the CSS to display none or block, but I get the following error:

Uncaught TypeError: Cannot read property 'openRecipe' of undefined

Here is my code:

var App = React.createClass({


  getInitialState(){


    return{

      showModal:false,


      recipeKeys: [ ],

      recipes: [ ]

    }



  },

  addRecipeKey: function(recipe){


    var allKeys = this.state.recipeKeys.slice();

    var allRecipes = this.state.recipes.slice();


    allKeys.push(recipe.name);

    allRecipes.push(recipe);

    localStorage.setObj("recipeKeys", allKeys);


    this.setState({recipeKeys: allKeys, recipes: allRecipes}, function(){


      console.log(this.state);


    });


  },

  componentDidMount: function(){


    var dummyRecipes = [

      {
        "name": "Pizza",

        "ingredients": ["Dough", "Tomato", "Cheese"]

      },

      {

        "name": "Sushi",

        "ingredients": ["Rice", "Seaweed", "Tuna"]

      }

    ]


    if(localStorage.getItem("recipeKeys") === null){


        localStorage.setObj("recipeKeys", ["Pizza", "Sushi"]);

        dummyRecipes.forEach(function(item){

        localStorage.setObj(item.name, item);  

        });    

        this.setState({recipeKeys: ["Pizza", "Sushi"], recipes: dummyRecipes}, function(){


          console.log(this.state);

        });


    } else {

      var recipeKeys = localStorage.getObj("recipeKeys");


      var recipes = [];

      recipeKeys.forEach(function(item){

        var recipeObject = localStorage.getObj(item);

        recipes.push(recipeObject);

     });



     this.setState({recipeKeys: recipeKeys, recipes: recipes}, function(){

       console.log(this.state);

     });



    }



  }, 


  open: function(){


    this.setState({showModal:true});


  },

    close: function(){


    this.setState({showModal:false});

  },

  render: function(){


    return( 

      

        
Recipe Box
        
        
        
      


    )  

  }


});

var RecipeList = React.createClass({



  openRecipe: function(item){


    var listItem = document.getElementById(item);

    if(listItem.style.display == "none"){

        listItem.style.display = "block";

    } else {


      listItem.style.display = "none";      
    }    

   },

  render: function(){    

   return (


      


        {this.props.recipes.map(

          function(item,index){

            return (

              
 
                
{item.name}

                
Ingredients
                

                

                {item.ingredients.map(function(item){

                  return (
                    
  
                    
{item}
                     
  
                  )


                })} 
                
  
              
  

            )

          }



        )


        }

      
  


    ) 



  } 


});

ReactDOM.render(, document.getElementById('app'));

Also, I am trying to use a CSS method here, but maybe there is a better way to do it with React?

Can anyone help me? Thanks!