Removing unwanted users in a React application

Question

Removing unwanted users in a React application

Recently, I started working with React. There's a project where I need to filter users based on their upvotes, with the user having the most upvotes appearing at the top. However, I'm struggling to implement this feature properly. Additionally, whenever I interact with one user (e.g., upvoting), it affects all other users as well. Can anyone provide guidance on what might be going wrong or how I can fix these issues?

 import React from 'react';
 import Nav from './Nav';
 import './App.css';
 import react,{Component} from'react'

const Items = [
{
  img: "https://pbs.twimg.com/profile_images/1219033860991848448/UKWAPwfG_400x400.jpg",
  header:"Netlify, our Conversion from Angular to React",
  website:"netlify.com",
  timeAuthor:"Submitted  9 hours ago by brianlammar",

},
{
  img:"https://pbs.twimg.com/profile_images/1825094360/random_dude_400x400.jpg",
  header:"React in patterns - List of design patterns ragaca",
  website:"github.com",
  timeAuthor:"Submitted 9 hours ago by  magenta_placenta",

},
{
  img:"https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c8366146-25b7-49b3-a640-58439d2a2baa/d5gs9sv-0c98ab64-0f32-4c6d-90ed-39d38d2bf0ba.jpg/v1/fill/w_900,h_675,q_75,strp/random_dude_who_lives_near_me_by_misa_amane_17_d5gs9sv-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9Njc1IiwicGF0aCI6IlwvZlwvYzgzNjYxNDYtMjViNy00OWIzLWE2NDAtNTg0MzlkMmEyYmFhXC9kNWdzOXN2LTBjOThhYjY0LTBmMzItNGM2ZC05MGVkLTM5ZDM4ZDJiZjBiYS5qcGciLCJ3aWR0aCI6Ijw9OTAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.YP5o5wapk-q4-6vpQIKaERchdyvNl8MOAs_cbG7ThfU",
  header:"Redux vs Mobx vs Flux vs... Do you even...",
  website:"goshakkk.name",
  timeAuthor:"Submitted 8 hours ago by goshakk",

}
]
  class App extends Component{
    
   constructor(props){
     super(props)
     this.state= {
       count:0 
     }
   }
   incremento(){
     this.setState({
       count:this.state.count + 1
     })
   }
   decremento(){
     this.setState({
       count:this.state.count -1 
     })
   }
  
   render(){

    
     return (
    
    Items.map(item =>{
      return (
        <div>
          <div className='section'>
          <span className='Votes'>
          <i  onClick={() => this.incremento()}  className="fas fa-arrow-up"></i>
          <p>{this.state.count}</p>
          <i  onClick={() => this.decremento()} className="fas fa-arrow-down"></i>
          </span>
          <img src={item.img}  />
          <div className='Content'>
            <h1 className='h'>{item.header}</h1>
            <p>{item.website}</p>
            <p>{item.timeAuthor}</p>
            <span className='lil'>
            <p className='red'>10 Comments</p>
            <p>share</p>
            <p>save</p>
            <p>hide</p>
            <p>report</p>
            <p>pocket</p>
            </span>
          </div>
          </div>
        </div>
      )
    
      })
     )
    }
  }
 
  
 
export default App;

javascript css reactjs project

Answer 1

Answer №1

Here is an example of how the code should appear: https://example.com/gracious-glitter-x283l?file=/src/App.js

 import React, { useState } from 'react';
import Header from './Header';
import './App.css';


const Data = [
    {
      id: 1,
      count: 0,
      img:
        "image-url-1.jpg",
      title: "React Hooks - A Beginner's Guide",
      website: "reactjs.org",
      submittedBy: "Submitted 7 hours ago by user123"
    },
    {
      id: 2,
      count: 0,
      img:
        "image-url-2.jpg",
      title: "Styled Components vs Emotion - A Comparison",
      website: "css-tricks.com",
      submittedBy: "Submitted 6 hours ago by design_guru"
    }
  ],
  Post = ({ adjustCount, data }) => (
    <div>
      <div className="post-section">
        <span className="Votes">
          <i
            onClick={() => {
              adjustCount(1);
            }}
            className="fas fa-arrow-up"
          >
            UP
          </i>
          <p>{data.count}</p>
          <i
            onClick={() => {
              adjustCount(-1);
            }}
            className="fas fa-arrow-down"
          >
            DOWN
          </i>
        </span>

        <img src={data.img} />
        <div className="PostContent">
          <h1 className="Title">{data.title}</h1>
          <p>{data.website}</p>
          <p>{data.submittedBy}</p>
          <span className="Info">
            <p className="Comments">5 Comments</p>
          </span>
        </div>
      </div>
    </div>
  );

const App = () => {
  const [posts, setPosts] = useState(Data);

  return (
    <>
      {posts
        .sort((a, b) => (a.count < b.count ? 1 : -1))
        .map((data) => (
          <Post
            data={data}
            adjustCount={(value) => {
              const index = posts.findIndex((d) => d.id === data.id),
                newData = [...posts];
              newData[index].count = newData[index].count + value;
              setPosts(newData);
            }}
          />
        ))}
      ;
    </>
  );
};

export default App;

Answer 2

Here is an example of how the code should appear: https://example.com/gracious-glitter-x283l?file=/src/App.js

 import React, { useState } from 'react';
import Header from './Header';
import './App.css';


const Data = [
    {
      id: 1,
      count: 0,
      img:
        "image-url-1.jpg",
      title: "React Hooks - A Beginner's Guide",
      website: "reactjs.org",
      submittedBy: "Submitted 7 hours ago by user123"
    },
    {
      id: 2,
      count: 0,
      img:
        "image-url-2.jpg",
      title: "Styled Components vs Emotion - A Comparison",
      website: "css-tricks.com",
      submittedBy: "Submitted 6 hours ago by design_guru"
    }
  ],
  Post = ({ adjustCount, data }) => (
    <div>
      <div className="post-section">
        <span className="Votes">
          <i
            onClick={() => {
              adjustCount(1);
            }}
            className="fas fa-arrow-up"
          >
            UP
          </i>
          <p>{data.count}</p>
          <i
            onClick={() => {
              adjustCount(-1);
            }}
            className="fas fa-arrow-down"
          >
            DOWN
          </i>
        </span>

        <img src={data.img} />
        <div className="PostContent">
          <h1 className="Title">{data.title}</h1>
          <p>{data.website}</p>
          <p>{data.submittedBy}</p>
          <span className="Info">
            <p className="Comments">5 Comments</p>
          </span>
        </div>
      </div>
    </div>
  );

const App = () => {
  const [posts, setPosts] = useState(Data);

  return (
    <>
      {posts
        .sort((a, b) => (a.count < b.count ? 1 : -1))
        .map((data) => (
          <Post
            data={data}
            adjustCount={(value) => {
              const index = posts.findIndex((d) => d.id === data.id),
                newData = [...posts];
              newData[index].count = newData[index].count + value;
              setPosts(newData);
            }}
          />
        ))}
      ;
    </>
  );
};

export default App;

Answer 3

Answer №2

The number of users is rising because the count that is being maintained is not specific to individual users, but rather a general counter.

Instead of this approach, consider:

Removing the current count state.
Introducing a new state called 'users', which will store an array of user objects, each with their own count property.

this.state = Items.map(i => ({...i, count: 0}))

Modify the incremento(id) and decremento(id) methods to accept an id parameter.
With this adjustment, you can update the count for the specific user whose button was clicked in the respective methods.
In the render method, sort the `Items` array by the count field and then display each user accordingly.

By implementing these changes, you can ensure that the count only increases for the selected user, and display users sorted by counts in descending order.

Answer 4

The number of users is rising because the count that is being maintained is not specific to individual users, but rather a general counter.

Instead of this approach, consider:

Removing the current count state.
Introducing a new state called 'users', which will store an array of user objects, each with their own count property.

this.state = Items.map(i => ({...i, count: 0}))

Modify the incremento(id) and decremento(id) methods to accept an id parameter.
With this adjustment, you can update the count for the specific user whose button was clicked in the respective methods.
In the render method, sort the `Items` array by the count field and then display each user accordingly.

By implementing these changes, you can ensure that the count only increases for the selected user, and display users sorted by counts in descending order.

Removing unwanted users in a React application

Answer №1

Answer №2

Similar questions

Is there a way to automatically trigger a function once another function has completed its execution?

A guide to displaying a countdown timer in an Angular application during the app's loading process

Rendering React components and filtering arrays from the fetched data

CSS: Adjusting the vertical position of text without affecting the background

How come the checkboxes for trees are not being checked in the child component while using Ant Tree Design?

Extracting values from a JSON object in JavaScript

Just a simple canvas animation

Adjusting Specific Time for Jquery to Change Date if Less Than X Value

retrieving JSON information from a PHP endpoint

Accessing data from datatables in a typescript component in HTML format

Webpack encounters issues when compiling ES6 syntax from external packages

When making an HTTP GET request followed by another GET request in Express, it results in an error with undefined parameters on the

What is the best way to make an HTML table with a static header and a scrollable body?

Send the update password information in a Bootstrap modal using ajax

Incorporating React Bootstrap into a component for stylish card designs

Not a modal or popup-style window

Information briefly appears in the console before vanishing

Troubleshooting issues with ng-options not correctly updating ng-model in AngularJS when using ajax requests

Modify the selected toggle buttons' color by utilizing the MUI ThemeProvider

Issue with Path Alias Functionality in Bun Project Despite Accurate Configuration