title: React Native - How to pass data to component that's an attribute inside another component
body: <p>So I have this code that iterates over a list of data. I'm trying to render the avatar image, but it's not working. I'm assuming I have to somehow get &quot;item.icon&quot; into &quot;props&quot; for Avatar.Image and I'm not super sure how to do this.</p>
  <pre><code>import React, {useState} from 'react';
  import {FlatList, View, Text, StyleSheet, SafeAreaView} from 'react-native';
  import {Avatar, IconButton, Card, Title} from 'react-native-paper';
  import Loader from '../components/Loader';
  
  return (
  &lt;SafeAreaView style={styles.container}&gt;
  &lt;FlatList
  style={styles.flatlist}
  data={[
            {
  icon: 'https://www.google.com/url?sa=i&amp;url=https%3A%2F%2Fwww.flaticon.com%2Ffree-icon%2Favatar_194938&amp;psig=AOvVaw3_3HQARQJzjX8MBiBqsmxM&amp;ust=1627701465958000&amp;source=images&amp;cd=vfe&amp;ved=0CAsQjRxqFwoTCJCz6c_qifICFQAAAAAdAAAAABAD',
  username: 'John Smith',
  date: 'June 20 2021',
            },
          ]}
  renderItem={({item}) =&gt; (
  &lt;Card mode={'outlined'} style={{marginBottom: 10}}&gt;
  &lt;Card.Title
  title={item.username}
  subtitle={item.date}
  icon={item.icon}
  left={props =&gt; (
  &lt;Avatar.Image size={35} source={{uri: item.icon}} /&gt;
                )}
  /&gt;
  &lt;/Card&gt;
          )}
  /&gt;
  &lt;/SafeAreaView&gt;
    );
  };
  </code></pre>