title: How to get text content of elements in a div onClick? React.js, JavaScript
body: <p>I would like to get the text content of the div, on click.</p>
  
  <p>I have tried to add ref's to my syntax but it doesn't work when I try to do <code>const ref = this.refName.textContent</code>.</p>
  
  <p>So what I would like to achieve is on click of <code>recipe-container</code>, store the text content of the <code>h3</code> and <code>ul</code> into variables, where the variable are in a parent component.</p>
  
  <p>This is my child component here:</p>
  
  <pre><code>export default class Recipecontainer extends React.Component {
  render(){
      const recipe = this.props.recipe;
      let recipeIngredients = recipe.ingredients;
      recipeIngredients = recipeIngredients.map((item, index) =&gt; &lt;li key={index}&gt;{item}&lt;/li&gt;);
      return (
          &lt;div className="recipe-container"&gt;
              &lt;h3 className="recipe-name"&gt;{recipe.recipeName}&lt;/h3&gt;
              &lt;div className="food-img"&gt;
                  &lt;img src={recipe.smallImageUrls} alt=""/&gt;
              &lt;/div&gt;
              &lt;ul className="ingredient-list"&gt;{recipeIngredients}&lt;/ul&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>And this is the method that I would plan to use, which is in my parent component, to save these text content into variables; but of course what i have written below does not work.</p>
  
  <pre><code>saveData(e){
      const recipeName = document.getElementsByClassName(".recipe-name").textContent;
  }
  </code></pre>
  
  <p>Any help is appreciated!</p>