Organizing playing cards in a React JS application

As a beginner just starting out with React JS, I'm working on arranging cards in a medium size for my application. I came across a card design that I like and I'm seeking help to achieve something similar. Any assistance would be greatly appreciated. Thank you in advance.

https://i.sstatic.net/uVBY4.png

Currently, I'm encountering an issue where the cards are not displaying as desired. Here's what I have:

https://i.sstatic.net/jHj8H.png

Below is a snippet of my code:

render() {
    return ( 

        { /*heading starts */ } <
        div style = {
            {
                paddingTop: 150,

                paddingLeft: 70,

                color: 'white'
            }
        } >
        < div style = {
            {
                position: 'absolute',
                paddingLeft: 260,
                color: 'black',
                top: 90,
            }
        } >
        < CardGroup >
        <Card >
        <Card.Img variant = "top"
        src = "./image/free.png" / >
        < Card.Body >
        <Card.Title > Free < /Card.Title> <
        Card.Text >
        in to additional content.This content is a little bit longer. </Card.Text> < /
        Card.Body > <
        Card.Footer >
        <
        small className = "text-muted" > Last updated 3 mins ago < /small> < /
        Card.Footer > 
        </div> 
    );
}
cssreactjscard

Answer №1

The chosen card stands out due to its increased height, shadow effect, and an additional blue box on top. Here's how you can achieve this effect:

Start by creating two CSS classes: one containing the common styles shared by all cards, and the other with the special styles for the selected card. Then, apply the additional class (selected) conditionally based on the card selection state. This way, when a user picks Card A, it will receive the extra styles from the selected class and remove them from the previously selected card.

import React, { useState } from "react";
import "./card.css";

const cards = () => {
  const [selected, setSelected] = useState('');
  return (
    <Container>
    <Card className={`normalcard ${selected == "1" ? "selectedcard": ""}`} />
    <Card className={`normalcard ${selected == "2" ? "selectedcard": ""}`} />
    <Card className={`normalcard ${selected == "3" ? "selectedcard": ""}`} />
    <Card className={`normalcard ${selected == "4" ? "selectedcard": ""}`} />
    </Container>
  )
}

export default cards;
.normalcard {
 ...
}

.selectedcard {
  ...normalcard;
  -webkit-box-shadow: 0 0 10px 0 #000000;
    -moz-box-shadow: 0 0 10px 0 #000000;
    box-shadow: 0 0 10px 0 #000000;
}

Answer №2

Check out my code snippet below:


 <
                    div style = {
                        {
        
                            position: 'absolute',
                            paddingLeft: 260,
                            color: 'black',
                            top: 90,
                        }
                    } >
                    <
                    CardGroup >
                    <
                    Card >
                    <
                    Card.Img variant = "top"
                    src = "./image/free.png" / >
                    <
                    Card.Body >
                    <
                    Card.Title > Free < /Card.Title> <
                    Card.Text >
                    in to additional content.This content is a little bit longer. <
                    /Card.Text> < /
                    Card.Body > <
                    Card.Footer >
                    <
                    small className = "text-muted" > Last updated 3 mins ago < /small> < /
                    Card.Footer > <
                    /Card> <
                    Card >
                    <
                    Card.Img variant = "top"
                    src = "./image/free.png" / >
                    <
                    Card.Body >
                    <
                    Card.Title > Card title < /Card.Title> <
                    Card.Text >
                    This card has supporting text below as a natural lead - in to additional content. { ' ' } <
                    /Card.Text> < /
                    Card.Body > <
                    Card.Footer >
                    <
                    small className = "text-muted" > Last updated 3 mins ago < /small> < /
                    Card.Footer > <
                    /Card> <
                    Card >
                    <
                    Card.Img variant = "top"
                    src = "./image/free.png" / > <
                    Card.Body >
                    <
                    Card.Title > Card title < /Card.Title> <
                    Card.Text >
                    This is a wider card with supporting text below as a natural lead - in to additional content.This card has even longer content than the first to show that equal height action. <
                    /Card.Text> < /
                    Card.Body > <
                    Card.Footer >
                    <
                    small className = "text-muted" > Last updated 3 mins ago < /small> < /
                    Card.Footer > <
                    /Card>  <
                    Card >
                    <
                    Card.Img variant = "top"
                    src = "./image/free.png" / >
                    <
                    Card.Body >
                    <
                    Card.Title > Card title < /Card.Title> <
                    Card.Text >
                    This is a wider card with supporting text below as a natural lead - in to additional content.This card has even longer content than the first to show that equal height action. <
                    /Card.Text> < /
                    Card.Body > <
                    Card.Footer >
                    <
                    small className = "text-muted" > Last updated 3 mins ago < /small> < /
                    Card.Footer > <
                    /Card> < /
                    CardGroup >
                    <
                    /
                    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

Issues with displaying characters in React when using UTF-8 encoding

When utilizing the Material-UI kit for React, I've encountered an issue post-build where UTF-8 character set does not display correctly. Instead of displaying characters like 'Ş, Ü, ö, Ç, ç', it shows a question mark symbol '?&apo ...

reactjsmaterial-ui

UI is experiencing lag issues post Alert invocation in React Native

// When a text field is pressed, an alert function is called. This function opens an alert and then calls another function on confirmation. However, the application gets stuck when "showAlert1()" is called, and this function is being invoked multiple times ...

javascriptreactjsreact-native

Struggling to modify form field using prevState in React

In my code, I have a state variable defined as below: constructor(props) { super(props) this.state = { fields: { applicantName: '', applicantType: '', applican ...

reactjs

Function for swapping out the alert message

I am searching for a way to create my own custom alert without interfering with the rendering or state of components that are currently using the default window.alert(). Currently working with React 15.x. function injectDialogComponent(message: string){ ...

javascriptreactjs

What is the best method for efficiently loading SVG icons on an HTML page without redundancy? / Is utilizing <use href> recommended?

My struggle with implementing icons in Angular While working on a new Angular project, I've encountered challenges with my current SVG-icon implementation method from a previous project (@ngneat/svg-icon). The process involves organizing SVG files in ...

javascripthtmlcsssvgicons

"Exploring the versatility of using variables in jquery's .css

I’m facing an issue where I need the rotation of a div to be based on the value stored in "anVar." This is what I currently have: function something() { $('.class').css('-webkit-transform:rotate('anVar'deg)') } The desi ...

javascriptjquerycssvariablesrotatetransform

What is the best way to show inline icons within menu items?

Issue Upon selecting an option from the menu, I encounter a problem where the icon (represented by a question mark inside a speech bubble) appears on a different line than the text ("Question"). Fig. 1. Display of menu after selection with the icon and t ...

javascriptcssreactjsmaterial-ui

What is the best way to eliminate empty space at the bottom of a page that is being caused by a button?

I have identified the reason for the blank space at the bottom of my page - it's due to a sticky "back to top" button. However, I am unsure how to resolve this issue. Here is the layout of the page: <nav> navbar </nav> <div> car ...

htmlcssbootstrap-5

Simple HTML and CSS tutorial: Creating a vertical menu with a left-popping submenu

Recently, I designed a vertical menu bar using a Dreamweaver template with CSS styling. Subsequently, I added a submenu feature that I intended to have pop out from the left side of the main menu links they are associated with. Despite numerous attempts an ...

htmlcss

The mouse pointer adjusts according to the event

I am working on an ajax request and I have implemented a feature where the cursor changes appearance. document.body.style.cursor = "wait"; This immediately shows the cursor as a spinning circle when the request starts. At the end of the request, I ch ...

javascriptjquerycssajax

In a React Redux application, I struggle with typing in the input fields and making changes

Can someone help me with a problem I'm having with this code? When I try to type on the inputs, nothing happens. Here is the link to the code: https://stackblitz.com/edit/react-hghsyk?file=reducers%2Findex.js ...

reactjsredux

Customized style sheets created from JSON data for individual elements

One of the elements in the API requires dynamic rendering, and its style is provided as follows: "elementStyle": { "Width": "100", "Height": "100", "ThemeSize": "M", "TopMargin": "0", " ...

javascriptcssangularjsdynamic-css

Express server and create-react-app build facing issues with Glyphicons and fonts functionality

Encountering an issue in the browser console: Failed to decode downloaded font "localhost:5000/static/media/fontname.@#$.woff" OTS parsing error: invalid version tag Came across some suggested solutions like adding a homepage:"./" to package.json. However ...

reactjsexpress

Align the table pagination buttons and rows per page to the left using Material UI

I'm currently working on a website where I need to make the table responsive for mobile screens. Although I've been able to shrink the table and remove the horizontal scroll bars, I'm facing issues with the footer. The footer content is not ...

reactjsmaterial-ui

Failure to highlight items when using the multiple select function

After adding a select all button to a multiple select, I encountered an issue. Although all the items are being selected, they are not highlighted when clicking on the select all button. Below is the code snippet: <div class="label_hd">Profiles* {{ ...

javascripthtmlcssangularjs

Guide on categorizing MUI icon types

My current code snippet is as follows: type MenuItem = { key: string; order: number; text: string; icon: typeof SvgIcon; }; However, when I attempt to use it in my JSX like this: <List> {MENU.map((menuItem: MenuItem) => ( ...

reactjstypescriptmaterial-ui

The pagination feature of the material-ui data grid is experiencing issues with double clicks because of its compatibility with the react-grid-layout library for

I am currently using the react-grid-layout library to manage the resizing of both charts and a material-ui data grid table. However, I am encountering an issue where when clicking on the table pagination arrow, it does not work properly. I have to click tw ...

javascriptreactjsmaterial-uireact-grid-layout

Issues with alignment within Bootstrap grid system

I have three unique "cards" that I want to display horizontally and center on the page without using the bootstrap card class. Currently, I am attempting to assign each of them a width of .col-lg-4 within an outer div set to full width. However, they are s ...

csstwitter-bootstrap

Encountering a TypeError: relativeURL.replace is not a valid function in Next.js

Why am I encountering this error in my Next.js application? TypeError: relativeURL.replace is not a function. (In 'relativeURL.replace(/^/+/, '')', 'relativeURL.replace' is undefined) Request.js file const API_KEY = process ...

javascriptreactjsaxiosnext.js

Utilize context and custom hooks in React to efficiently handle the current user's management

Implementing two methods, login and logout, has been a goal of mine. I've been working on sharing the current user's data through context to access those details from any component. In my App component, I have integrated the useUser custom hook ...

reactjsreact-hooks