Implementing a color change for icons in React upon onClick event

Question

Implementing a color change for icons in React upon onClick event

export default function Post({post}) {

const [like,setLike] = useState(post.like)
const [islike,setIslike] = useState(false)

const handler=()=>{
setLike(islike? like-1:like+1 )
setIslike(!islike)

}
return (
<>
<div className="postcontainer">
   <div className='postwrapper'>

    <div className="postTop">
        <div className="topleft">
            <img className="images" src= {Users.filter((u)=> u.id === post.userId)[0].imagesProfile} alt="profile" />
            <span className="names"> {Users.filter((u)=> u.id === post.userId)[0].userName} </span>
            <span className="dates"> {post.date}</span>

        </div>
        <div className="topzRight">
        <MoreVert />
        </div>

    </div>
    <div className="postcenter">

       <span className='text'>{post.descrip}</span>
       <img className="imagepost" src={post.imagesPost} alt="newpost" />

    </div>
    <div className="postbotton">
        <div className="postbottonLeft">
        <LocationOnIcon     className="icon" />
        <FavoriteIcon   className="icon" onClick={handler}/>
       
        <span className='counter' > {like} People liked it</span>
        </div>
        <div className="postbottonRight">
        <span>{post.comment} comments</span>
        <SmsOutlined className="iconcomment" />
        </div>

    </div>
    </div> 
</div>
</>;
)

javascript css reactjs material-ui

Answer 1

Answer №1

To start, it's important to communicate your intentions in the code rather than solely relying on the title to convey your question and using the body for the code.

Additionally, if you're looking to change the color of an HTML element based on whether it has been clicked or not, consider creating CSS classes for each desired state. For example, you could have a class called .isLiked and another called .isNotLiked, each representing a different color. Then, within your code, use a conditional statement on the className attribute of the HTML element to determine which class should be applied based on a condition.

For instance:

className={isLiked ? 'isLiked' : 'isNotLiked'}

Answer 2

To start, it's important to communicate your intentions in the code rather than solely relying on the title to convey your question and using the body for the code.

Additionally, if you're looking to change the color of an HTML element based on whether it has been clicked or not, consider creating CSS classes for each desired state. For example, you could have a class called .isLiked and another called .isNotLiked, each representing a different color. Then, within your code, use a conditional statement on the className attribute of the HTML element to determine which class should be applied based on a condition.

For instance:

className={isLiked ? 'isLiked' : 'isNotLiked'}

Implementing a color change for icons in React upon onClick event

Answer №1

Similar questions

Are extra parameters in the URL causing issues with AngularJS routing?

Ways to stop Bootstrap 4 dropdown from appearing when clicking on an input field?

Inserting an item into a list

Error: The server instance pool has been terminated, requiring enhancements to the existing solution

What could be causing the MIME type error in my Django/React app when trying to load CSS/JS files from AWS?

Updating row values in an Angular table

When attempting to install React Native on a Mac using the "npx react-native init MyTestApp" command, the

Send the data from a div to a different page using PHP

Pass data in JSON format from Laravel controller to AngularJS

Tips for maintaining a sticky header while continuing to utilize Bootstrap table classes such as table-responsive and table-stripped

Is there a way to select and handle multiple elements using async wdio with the same selector?

Leveraging ASP.NET MVC 5 to integrate an online document viewer from Office 365, seamlessly displaying Word documents within a sleek, compact window

How can you align two div elements side by side, if the first div is spanning across two lines?

Leveraging React Native to position a view absolutely in the center of the screen without obstructing any other components

Understanding the functionality of scope in AngularJS is essential for mastering the framework

Display a preloader image while waiting for the content to load using jQuery or AJAX

Troubleshooting the error "The 'listener' argument must be a function" in Node.js HTTP applications

The fetch() function is inundating my API with an overwhelming amount of requests

What is the best way to insert a chart into a div using *ngIf in Angular?

The error "ReferenceError: window is not defined" occurs when calling client.join() due to