title: React Native - How to select multiple items and display them?
body: <p>I would like to display selected items, but the situation I have got is not showing images but only the <code>backgroundColor</code>. There is image <code>uri</code> in <code>productData</code>, so I would like to display the <code>uri</code>. Another issue I am having is that the <code>CheckBox</code> is not checked.</p>
  <p>My code below :</p>
  <pre class="lang-js prettyprint-override"><code>
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      marginTop: 100,
    },
    topContainer: {
      flexDirection: 'row',
      marginHorizontal: 15,
      paddingBottom: 20,
      paddingTop: 10,
      borderBottomWidth: 0.5,
      borderColor: colors.very_light_pink,
    },
    iconWrap: {
      width: 60,
      height: 60,
      borderRadius: 6,
      backgroundColor: '#cccccc',
      alignItems: 'center',
      justifyContent: 'center',
      marginRight: 5,
    },
    icon: {
      width: 20,
      height: 20,
    },
    row: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      marginHorizontal: 15,
      marginBottom: 15,
    },
  });
  
  const productData = [
    {
      id: 0,
      productName: 'a',
      price: 45000,
      image:
        'https://static.zara.net/photos///2021/V/0/2/p/8211/407/250/73/w/563/8211407250_2_1_1.jpg?ts=1613387641299',
    },
    {
      id: 1,
      productName: 'b',
      price: 45000,
      image:
        'https://static.zara.net/photos///2021/V/0/2/p/0526/407/707/2/w/1280/0526407707_6_1_1.jpg?ts=1610451943259',
    },
    {
      id: 2,
      productName: 'c',
      price: 129000,
      image:
        'https://static.zara.net/photos///2021/V/0/2/p/0706/442/710/2/w/563/0706442710_2_1_1.jpg?ts=1614254205907',
    },
    {
      id: 3,
      productName: 'd',
      price: 139000,
      image:
        'https://static.zara.net/photos///2021/V/0/2/p/0706/431/446/2/w/563/0706431446_2_1_1.jpg?ts=1613386951068',
    },
    {
      id: 4,
      productName: 'e',
      price: 189000,
      image:
        'https://static.zara.net/photos///2021/V/0/2/p/4162/536/401/2/w/1280/4162536401_1_1_1.jpg?ts=1613122054256',
    },
    {
      id: 5,
      productName: 'f',
      price: 89000,
      image:
        'https://static.zara.net/photos///2021/V/0/2/p/4165/537/430/2/w/563/4165537430_1_1_1.jpg?ts=1613122064808',
    },
  ];
  
  const LiveAddProducts = (props) =&gt; {
    const [productClicked, setProductClicked] = useState(null);
    const [selectedProducts, setSelectedProducts] = useState([]);
  
    useEffect(() =&gt; {
      if (productClicked !== null) {
        setSelectedProducts((prevState) =&gt; [
          ...prevState,
          // I believe this should be changed
          { id: prevState.length, image: productClicked },
        ]);
  
        setProductClicked(null);
      }
    }, [productClicked]);
  
    console.log(selectedProducts.image);
  
    return (
      &lt;View style={[styles.container]}&gt;
        &lt;View style={[styles.topContainer]}&gt;
          &lt;TouchableOpacity style={[styles.iconWrap]}&gt;
            &lt;Image source={assets.live_add_icon} style={[styles.icon]} /&gt;
          &lt;/TouchableOpacity&gt;
  
          {selectedProducts.map((item, index) =&gt; (
            &lt;TouchableOpacity style={[styles.iconWrap]} key={item.id}&gt;
              &lt;Image source={{ uri: productData.image }} style={[styles.icon]} /&gt;
            &lt;/TouchableOpacity&gt;
          ))}
        &lt;/View&gt;
  
        &lt;ScrollView style={{ paddingTop: 20 }}&gt;
          {productData.map((item, index) =&gt; (
            &lt;View style={[styles.row]}&gt;
              &lt;ProductsList
                price={item.price}
                image={item.image}
                productName={item.productName}
              /&gt;
              // Any problems here?
              &lt;CheckBox
                size={20}
                onPress={() =&gt; setProductClicked(index)}
                source={
                  productClicked === index
                    ? assets.icon_check_on
                    : assets.checked_off
                }
              /&gt;
            &lt;/View&gt;
          ))}
        &lt;/ScrollView&gt;
        &lt;BottomButton
          btnText={'Add Items'}
          buttonStyle={{ height: 50, backgroundColor: colors.iris }}
        /&gt;
      &lt;/View&gt;
    );
  };
  
  LiveAddProducts.propTypes = {};
  
  export default LiveAddProducts;
  </code></pre>
  <p>The image which has problems :</p>
  <p><a href="https://i.stack.imgur.com/drdGl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/drdGl.png" alt="As you can see, I can't see the image and the CheckBox is not checked" /></a></p>