Displaying a check icon on a chosen card using React.js

Is there a way to display a check icon on the selected card similar to this example https://i.sstatic.net/Usuj6.png

If you have any ideas or suggestions, please help. Thank you in advance!

Answer №1

Try implementing it this way

<div className="col" onClick={() => chooseCard(2)}>
   <div className={selectedCard === 2 ? "active-icon" : "d-none"}>
        <i className="bi bi-check-circle-fill text-appcolor"></i>
   </div>
   <div className={2 === selectedCard ? "icon-card-active p-4 mx-auto icon-card" : "card p-4 mx-auto icon-card"}>
        <div className="text-center">
            <img src={shoesIcon} className="img-fluid main-icon" alt="logo" />
            <p className={2 === selectedCard ? "icon-title-active" : "icon-title"}>Footwear</p>
        </div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to retrieve a specific value in an array of objects

When working with the p5 javascript library, there is a convenient built-in function called {key} that captures the key you press. For instance, using text(${key},200,200) will display the key pressed at position 200, 200 on the canvas. If I were to stor ...

The "Open in new tab" feature seems to be missing for links when using Safari on iOS

My webapp contains links structured like this: <a href="/articles/">Articles</a> I am using JavaScript to control these links within my app: $(document).on("click", 'a', function(ev) { ev.preventDefault(); ev.stopPropagat ...

What is the correct method for handling images in HTML and CSS?

Hey there! Just playing around on jsfiddle and wanted to share this Destiny-inspired creation: http://jsfiddle.net/3mfnckuv/3/ If you're familiar with Destiny, you'll see the inspiration haha.. But here are a few questions for you: 1) Any ide ...

Disable the <Input> textField from receiving additional text input while the function is being called

Instruction: When the user pulls the external hand lever, the jackpot reel will begin spinning. The lever is connected via USB and the trigger for the jackpot reel spin is the "*" character on the keypad. Problem: Currently, each time the user pulls the ...

Tallying the Number of Accordion Toggle Clicks

Let me present a scenario where I have some accordions and would like to keep track of how many times the user expands each one. Could you guide me on how to implement this particular feature? Appreciate your support, Kevin ...

twice the custom nextjs responsive detection hook is being called

A custom hook has been developed that detects device on reload and resize events. import { useState, useEffect, useRef, useCallback } from "react"; export const DEVICE_SIZES_VALUE = { MOBILE: 576, TABLET: 768, DESKTOP: 992, LARGE_DESKTOP ...

"Exploring the depths of MEAN stack: Employing mongoose to extract the complete

I'm facing a little confusion here... I managed to retrieve an individual article using their _id with the findById(req.params.articleId) method Here is my GET request: router.get('/:articleId', function (req, res, next) { var decoded ...

Issue with Axios code execution following `.then` statement

Recently diving into the world of react/nodejs/express/javascript, I encountered an interesting challenge: My goal is to retrieve a number, increment it by 1, use this new number (newFreshId) to create a new javascript object, and finally add this event t ...

Is it possible to simultaneously run watchify and node-sass watch together?

Currently, I am utilizing npm scripts in conjunction with watchify and node-sass while incorporating the -w parameter. I am curious if it is feasible to execute both of these 'watch' commands simultaneously. Would this setup ensure that only sty ...

Unable to execute functions using an AJAX request

Currently, I am developing a React component that is bound to various actions. During this process, I found the need to call an API from within the component and handle the response accordingly. To achieve this, here is my current approach: In a successfu ...

Changing the value within a deeply nested object

I am facing an issue with a nested object in my code: { id: "id", name: "Name", type: "SC", allgemein: { charname: "Name", spieler: "Jon", }, eigenschaften: { lebenspunkte: "30", }, talente: {}, zauber ...

Locating the source and reason behind the [object ErrorEvent] being triggered

I'm facing an issue where one of my tests is failing and the log is not providing any useful information, apart from indicating which test failed... LoginComponent should display username & password error message and not call login when passed no ...

Passing the app variable from Express.js to routes

I am attempting to transfer some data from the app (variable defined as var app = express();) to some Socket.IO related code by sending a value to a middleware in a similar manner: function routes(app) { app.post('/evento', function (req, re ...

Masking Aadhaar numbers

I need to find a way to detect when the back button is pressed on an input field. The methods I have tried, e.key and e.which, are returning as undefined in mobile Chrome. How can I make this work? It's functioning properly on desktop. jQuery(funct ...

How about showcasing bigger images in the main body of the page?

When it comes to using CSS sprites for images, the typical advice is to reserve it for smaller images like icons. Why should larger content images only be represented through <img> elements? Are there not benefits to utilizing spriting for all types ...

Click the link to find the JSON node that corresponds to the onclick event

After parsing JSON, the JS code below is returning a list of movie titles for me. Each movie title node contains additional attributes and values that are not currently being displayed. My goal is to have the other values in that specific node displayed wh ...

Modify the background color of a single page while keeping the other pages unchanged

Is there a way to have a blue background on only one page of my rails application, while keeping all other pages with a white background? I attempted using the following code: <%= javascript_include_tag params[:controller] %> or <%= stylesheet_ ...

Adjusting the dimensions of a rectangle using jQuery: A step-by-step guide

I am encountering an issue while attempting to adjust the width and height of a rectangle using jQuery. The error message I receive is "Uncaught TypeError: Cannot read property 'scrollWidth' of null" Below you can find the code snippet in questi ...

Adjusting layout to second row based on screen width using CSS media query

My div contains the following elements: <div> <a class="postLink" href="{{post.authorLink}}" target="_blank">{{post.author}}</a> <span class="">Published: {{ post.published}}</span> <a class="postLink" href="{ ...

Ways to verify user authentication for navigating Vue routes

Working on a Single Page Application with Vue front-end, Express, and Parse (parse-platform) for back-end. After authenticating the user, I store their info in a session variable req.session.user = result; before sending it back to the client using res.sta ...