Create a simple like button component with React
Personally, I prefer to use functional components instead of using class-based components. One solution to your problem could be the following code.
import React, { useState } from 'react';
const LikeButton = () => {
const [likes, setLikes] = useState(100);
const [isClicked, setIsClicked] = useState(false);
const handleClick = () => {
if (isClicked) {
setLikes(likes - 1);
} else {
setLikes(likes + 1);
}
setIsClicked(!isClicked);
};
return (
<button className={ `like-button ${isClicked && 'liked'}` } onClick={ handleClick }>
<span className="likes-counter">{ `Like | ${likes}` }</span>
</button>
);
};
export default LikeButton;
How can I create a simple like button thats based on stored user IDs in an array?
I changed "likes: $scope.currentUser.id" to "likes: {$push: $scope.currentUser.id}" and the code worked.
This is a feature of deployd, which I'm using to generate my api.
How to create your OWN Like button? (Not facebook related)
To answer your question consider what happens with buttons and then go into like buttons.
- Pressing a button triggers an event on client which may or may not update a server somewhere to notify that a button has been pressed for such and such intention. You can send a lot of extra info with this event like when and where who and why etc
- Like buttons usually have extra info on who liked it and what they like. In order to get that you might ask people to sign in or provide some kind of input to identify them.
Take a real world example of a like button you can implement in say javascript using any server side technology
- Whoever install your script will be able to see the button. You may form it with any css or your javascript can simply load an iFrame from your server or append elements to DOM to show this button
- When clicked it calls your server with person's info or at least the page url where it was called. For example google analytics uses a unique ID associated with domain url to track visitors.
- when you recieve this call you can update your database/storage or anything with the tick mark that button on abc site has been pressed so lets update their likes or dislikes.
- If you want your javascript can also increment the number on the same page either before or after updating your server.
- When someone else visit that site the script again loads and send a request to your server so you can update the count on page but this time user does not click on like/dislike button so you dont update the record.
- You may then show it as a pie chart to user on total visits to their site or page with division in people who liked it and people who did not report back (did not press the button)
If you are still wondering how you can create a button . Use CSS button generator to get one
Creating like button for multiple items
Store likes as array of ids
const [eventsData, setEventsData] = useState([]);
const [likes, setLikes] = useState([]);
const handleLikeEvent = (id) => {
setLikes(likes.concat(id));
};
return (
<>
{eventsData.map((event) => {
return (
<div key={event.id}>
<img src={event.images[0].url} alt={event.name}></img>
<FontAwesomeIcon
icon={faHeart}
className={likes.includes(event.id) ? "redIcon" : "regularIcon"}
onClick={() => handleLikeEvent(event.id)}
/>
</div>
);
})}
</>
);
Related Topics
How to Hide an HTML Table Row <Tr> So That It Takes Up No Space
Html Select Only One Checkbox in a Group
How to Clear Input Field After Submitting Data in Angular
How Change Text and Color of Button Browse of Input File
Why Am I Seeing a 404 (Not Found) Error Failed to Load Favicon.Ico When Not Using This
How to Switch Two Divs in HTML
How Wide Is the Default '≪Body≫' Margin
How to Keep Parents of Floated Elements from Collapsing
Center and Bottom-Align Flex Items
Css Negation Pseudo-Class :Not() For Parent/Ancestor Elements
How to Style Selected Option Color Separately from Disabled Option
How to Remove the White-Space Created by an Image
How to Prevent Line-Break in a Column of a Table Cell (Not a Single Cell)
How to Display Dynamic Json Data in HTML Using Angular 6