title: separating an array inside a .map function
body: <p>i have a database that exports json. the exported json looks like this.</p>
  <pre><code>{&quot;Drinks&quot;:[{
  &quot;name&quot;:&quot;name&quot;,
  &quot;discription&quot;:&quot;discription&quot;,
  &quot;image&quot;:&quot;image&quot;,
  &quot;ingredients&quot;:&quot;['ingredients1', 'ingredients2']&quot;,
  &quot;instructions&quot;:&quot;instructions&quot;,
  &quot;author&quot;:&quot;author&quot;
  }]}
  </code></pre>
  <p>using the .map function i can print out everything there currently, the problem being that i want to seprate out the ingredients. i asumed that using another .map function inside the first one would do the trick but i keep getting</p>
  <pre><code>TypeError: p.ingredients.map is not a function
  </code></pre>
  <p>here is the trouble some code</p>
  <pre><code>    &lt;ul&gt;
      &lt;div className=&quot;grid&quot;&gt;
        {Drinks.map(p =&gt; (
  
        &lt;a className=&quot;card_red&quot;&gt;
  
          &lt;h3&gt;{p.name}&lt;/h3&gt;
  
          &lt;p&gt;
            &lt;b&gt; {p.discription} &lt;br/&gt; &lt;br/&gt; &lt;/b&gt;
  
            {
              p.ingredients.map(i =&gt; ( &lt;b&gt; {i} &lt;br/&gt; &lt;br/&gt; &lt;/b&gt; 
              ))}
  
              &lt;b&gt; {p.ingredients} &lt;br/&gt; &lt;br/&gt; &lt;/b&gt;
  
            &lt;b&gt; {p.instructions} &lt;br/&gt; &lt;br/&gt; &lt;/b&gt;
            &lt;b&gt; {p.up_votes} &lt;br/&gt; &lt;br/&gt; &lt;/b&gt;
            &lt;b&gt; {p.downvotes} &lt;br/&gt; &lt;br/&gt; &lt;/b&gt;
            &lt;b&gt; {p.author} &lt;br/&gt; &lt;/b&gt;
  
          &lt;/p&gt;
        &lt;/a&gt;
      ))}
      &lt;/div&gt;
      &lt;/ul&gt;
  </code></pre>
  <p>the output of witch is with the second .map function removed is,
  <a href="https://i.stack.imgur.com/1kMUr.png" rel="nofollow noreferrer">here</a></p>
  <p>my expected output would look like <a href="https://i.stack.imgur.com/LEFud.png" rel="nofollow noreferrer">this</a></p>