title: Pass a function as prop which returns some jsx template
body: <p>If I directly pass map function as a prop, it works. But it gets ugly.
  Is there a better way to approach this. I want to make it look cleaner.</p>
  <pre><code>&lt;FoodInfo info={restaurant?.menu.map((item, index) =&gt; (
    &lt;View key={index} style={{alignItems: 'center'}}&gt;
      &lt;View style={{height: Sizes.height * 0.35}}&gt;
        &lt;Image source={item.photo} style={styles.image} /&gt;
      &lt;/View&gt;
    &lt;/View&gt;
   ))}
  /&gt;
  </code></pre>
  <p>But if I separate it out and then pass it as prop it does not work. It gives me an error</p>
  <blockquote>
  <p>Functions are not valid as a React child. This may happen if you
  return a Component instead of <code>&lt;Component/&gt;</code> from render.</p>
  </blockquote>
  <pre><code>//Separated
  
    const infoFunc = () =&gt; {
      restaurant?.menu.map((item, index) =&gt; (
        &lt;View key={index} style={{alignItems: 'center'}}&gt;
          &lt;View style={{height: Sizes.height * 0.35}}&gt;
            &lt;Image source={item.photo} style={styles.image} /&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      ));
    };
  
  //pass the function
  
  &lt;FoodInfo info={infoFunc}/&gt;
  </code></pre>