Like Counter is updating the state of every dummy post-CodePudding

I am beginner is React and while working on small project that replicated UI of facebook. My dummy data is as follows:

dummy.js

export const users=[
{   'id':1,
    'username':'Jane',
    'profile_picture':'/assets/profilepictures/1.jpg',
    'desc':'This is my first post',
    'photos':'/assets/photos/a.jpg'
},
{   'id':2,
    'username':'Max',
    'profile_picture':'/assets/profilepictures/2.jpg',
    'desc':'This is my first post',
    'photos':'/assets/photos/b.jpg'
},
{
    'id':3,
    'username':'Mike',
    'profile_picture':'/assets/profilepictures/3.jpg',
    'desc':'This is my first post',
    'photos':'/assets/photos/c.jpg'
},
{
    'id':4,
    'username':'Lucas',
    'profile_picture':'/assets/profilepictures/4.jpg',
    'desc':'This is my first post',
    'photos':'/assets/photos/d.jpg'
},
{
    'id':5,
    'username':'Henry',
    'profile_picture':'/assets/profilepictures/5.jpg',
    'desc':'This is my first post',
    'photos':'/assets/photos/e.jpg'
},
{
    'id':6,
    'username':'Hopper',
    'profile_picture':'/assets/profilepictures/6.jpg',
    'desc':'This is my first post',
    'photos':'/assets/photos/f.jpg'
},
{
    'id':7,
    'username':'Dustin',
    'profile_picture':'/assets/profilepictures/7.jpg',
    'desc':'This is my first post',
    'photos':'/assets/photos/g.jpg'
},
{
    'id':8,
    'username':'Will',
    'profile_picture':'/assets/profilepictures/8.jpg',
    'desc':'This is my first post',
    'photos':'/assets/photos/h.jpg'
},
{
    'id':9,
    'username':'Erica',
    'profile_picture':'/assets/profilepictures/9.jpg',
    'desc':'This is my first post',
    'photos':'/assets/photos/i.jpg'
},
{
    'id':10,
    'username':'Suzie',
    'profile_picture':'/assets/profilepictures/10.jpg',
    'desc':'This is my first post',
    'photos':'/assets/photos/j.jpg'
},
{
    'id':11,
    'username':'Lyold',
    'profile_picture':'/assets/profilepictures/11.jpg',
    'desc':'This is my first post',
    'photos':'/assets/photos/k.jpg'
},
{
    'id':12,
    'username':'Wanda',
    'profile_picture':'/assets/profilepictures/12.jpg',
    'desc':'This is my first post',
    'photos':'/assets/photos/l.jpg'
},
{
    'id':13,
    'username':'Peter',
    'profile_picture':'/assets/profilepictures/13.jpg',
    'desc':'This is my first post',
    'photos':'/assets/photos/m.jpg'
},
{
    'id':14,
    'username':'MJ',
    'profile_picture':'/assets/profilepictures/14.jpg',
    'desc':'This is my first post',
    'photos':'/assets/photos/n.jpg'
}

]

and my React components that renders this data is Centre.js

import React from 'react'
import '../styles/center.css'
import {users} from './dummy'
import {useState} from 'react'
import Button from '@mui/material/Button'
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';


export default function Centre() {

  const [likes,setLikes]=useState(0)

  const handleClick=(e)=>{
    setLikes(likes 1)
  }
  return (
    <div className='center'>
      {users.map((e)=>(          
      <div className='container' key={e.id}>
            <img src={e.profile_picture} alt="pp"  id='profile-pic'/>
            <span id='username'>{e.username}</span>
            <p id='caption'>{e.desc}</p>
            <img src={e.photos} alt="post" id='photos'/>
            <div id='btm'>            
              <FavoriteBorderIcon onClick={handleClick}/>
              <span key={e.id}>{likes} people liked this</span>
              <ChatBubbleOutlineIcon/>
             </div>
          </div>
        ))}
    </div>
  )
}

I have implement a like counter to show the number of likes when user clicks on like button. The problem is that when I click on like button of one specific post,the like value of all the post are getting updated.

How can I solve this issue so that like value of only one post gets updated when user clicks on it.

CodePudding user response：

The number of likes is the same for each entry because you only define one number as state. You could initialize state with an array of length users and update the state using the index in the map function. You can see how it works by logging the state onClick if you're curious.

import React from 'react'
import '../styles/center.css'
import {users} from './dummy'
import {useState} from 'react'
import Button from '@mui/material/Button
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';


export default function Centre() {

  const initLikes = new Array(users.length).fill(0);
  const [likes,setLikes]=useState(initLikes)

  const handleClick=(index)=>{
    let tempLikes = likes
    tempLikes[index] = tempLikes[index]   1
    setLikes(tempLikes)
  }
  return (
    <div className='center'>
      {users.map((e, index)=>(          
      <div className='container' key={e.id}>
            <img src={e.profile_picture} alt="pp"  id='profile-pic'/>
            <span id='username'>{e.username}</span>
            <p id='caption'>{e.desc}</p>
            <img src={e.photos} alt="post" id='photos'/>
            <div id='btm'>            
              <FavoriteBorderIcon onClick={() => handleClick(index)}/>
              <span key={e.id}>{likes[index]} people liked this</span>
              <ChatBubbleOutlineIcon/>
             </div>
          </div>
        ))}
    </div>
  )
}

CodePudding user response：

You have likes in the Center component which is a central state for the component and you are updating it whenever any like button is pressed so it's natural to update in all the posts, what I think you need to do is add the likes count to each user in the dummy and then update the likes for that specific user when the button is pressed, I'll try to make a working example and share it if needed.