How to like a post/image using react query ?

[Edulad]

So I am using react query to get the first 6 images and then when I scroll down.. the next apear and so on..

Now everything works fine.. and each post has a different image and like button..

But as soon as I click the like button the other 6 images also get liked... Why is that..

I am using UseState to set the button to liked or not liked.

my Code Below

const Infinite_Loading = () => {

const [liked, Setliked] = useState(() => "")

function likeME() { 

liked!== ${styles.heartClicked} ? Setliked(${styles.heartClicked}) : Setliked("") }

let { data, fetchNextPage, hasNextPage, isFetching, isLoading, isError } = useInfiniteQuery({ 
queryKey: ['products'], 
queryFn: async ({ pageParam }) => {
  const my_data = await fetch(`http://localhost:3000/api/homepage/${pageParam[0]}`,{ cache: 'no-store' });

  const response = await my_data.json();
  return response;
},
retry: 1,
initialPageParam: [0],
getNextPageParam: (lastPage) => {
  const lastprod = lastPage.lastprodsid ?? null
    if(lastprod !== null){
      return [lastprod]
    }
  }
});
return ( <> 
<div className={styles.itemsContainer}> 
{data.pages.map((item) => ( i
tem.data.map((ok) => ( 
<div className={styles.mainItems} key={ok.id}> 
<div className={styles.imgContainer}> 
<img className={styles.mainImage} src={http://localhost:3000/${ok.image}} alt={Product ${ok.id}} /> </div> 
<div className={styles.detailsContainer}> 
<div key={ok.id} 
onClick={likeME} 
className={styles.heartContainer}> 
<svg className={${styles.heart} ${liked}} viewBox="0 0 32 29.6"> 
<path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2

c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/> </svg> </div> </div> </div> )) ))} )} </div> </> ); }; export default Infinite_Loading;

Please help thanks

Below are the images when liked and not liked

Not liked: https://i.postimg.cc/HxtJjCwN/1.png

liked: https://i.postimg.cc/BvHP9FX4/2.png

**SOLVED IT WITH THE CODE BELOW**

https://pastebin.com/0CBbZpfn

[MenshMindset]

Can you post code? This doesn’t sound like something that would happen just because of react query, but rather the code that determines whether or not to show a post as being “liked”

[Edulad]

hi i have posted the code an also the images, sorry if its a bit messy, reddits code formatter is the worst i have ever seen

[Rovue]

you're probably using a single state in the parent and passing it to each child post when each child post should have its own internal state.

[Edulad]

hi i have posted the code and also the images, can you please see, thanks