How can I setup a multiple like system in a wishList in react Native

Question

I'm currently working on a whishlist, I've tried two different methods.

The first one works but if I press my like ( heart icon), all the heart get fill.

The second method I can only select one article, not few.

My hook state first :

   const [liked, setLiked] = useState(false)
  const [counter, setCounter] =useState(-2)
  const[likedProduct, setLikedProduct]=useState(false)

My code for the first point :

if(likedProduct){
    var colorLike = {color: 'red'}
  } else {
    var colorLike = {}
  }

  var ArticleList = articleData.map((article, i) => {
    return (<View  style={{width: '42%'}}>
      <TouchableOpacity
        onPress={() => {
          onSubmitProduct(productId)
          navigation.navigate('Product')
        }
        }
      >

  <Image source={ article.img}  style={{ height: 250, width: 200} } />
  <View style={{ flex: 1, flexDirection: 'row', marginTop: 5, justifyContent: "space-between" }}>
    <Text style={{ fontWeight: 'bold' }}>{article.brand}</Text>
    <FontAwesome name="heart" size={20} style={colorLike}
    onPress={() => setLikedProduct(!likedProduct)
    }
    
    />
  </View>`

The code of my second point :

 <AntDesign name={liked && i== counter ? "heart":"hearto"} size={20} color="red"
       onPress={()=>{
        setLiked(!liked)
        setCounter(i)

Any idea to get multiple like ( onPress on multiple heart) ?

Thanks

Answer 1

It's relatively simple to add this functionality to the app, below is the behavior of the final sample app:

import React, { useState } from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import { FontAwesome } from '@expo/vector-icons';

const articleData = ['one', 'two', 'three', 'four', 'five'];
export default function App() {
  /* 
    to determine if the list item is liked or not, 
    we will set up a state "liked", which is an array and holds 
    the indexes of liked list items.
  */
  const [liked, setLiked] = useState([]);

/*
on TouchableOpacity we will use the below function, 
it will first see if the index of cliked list item is already present, 
if yes then we remove that index from "liked" state array, which is 
similar to unlike functionality, and if the index is not present, 
then we push that index to the "liked" state. 
-----------------------------------------
onPress={() => {
            console.log(liked);
            if (liked.includes(index)) {
              let unlike = liked.filter((elem) => elem !== index);
              setLiked(unlike);
            } else {
              setLiked([...liked, index]);
            }
          }}
------------------------------------------
then comes the styling of the icon, which is pretty simple, 
we just see if the index of that list item is present in the "liked" state, 
if yes then it means, that item is liked and we set the color of the icon "red" else "black"

<FontAwesome
              name="heart"
              size={20}
          ?? ? style={{ color: liked.includes(index) ? 'red' : 'black' }}
            />
*/

  return (
    <View style={styles.container}>
      {articleData.map((article, index) => (
        <TouchableOpacity
          onPress={() => {
            console.log(liked);
            if (liked.includes(index)) {
              let unlike = liked.filter((elem) => elem !== index);
              setLiked(unlike);
            } else {
              setLiked([...liked, index]);
            }
          }}>
          <View style={styles.list}>
            <Text>{article}</Text>
            <FontAwesome
              name="heart"
              size={20}
              style={{ color: liked.includes(index) ? 'red' : 'black' }}
            />
          </View>
        </TouchableOpacity>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  list: {
    padding: 10,
    margin: 5,
    flexDirection: 'row',
    flex: 1,
    justifyContent: 'space-between',
    backgroundColor: 'white',
  },
});

Working App : Expo Snack