Creating Bootstrap 5 card component with selection functionality similar to radio buttons and checkboxes

I developed a React JS application and integrated simple Bootstrap 5 cards. I am trying to create the functionality where the entire card can be selected as a radio button, such as options for male or female, so that the whole card appears checked like a checkbox, allowing us to identify the selected card.

<div class="card" style="width:400px">
   <img class="card-img-top" src="" alt="Card image" style="width:100%">
 <div class="card-body">
   <h4 class="card-title">John Doe</h4>
   <p class="card-text">Some Text</p>
 </div>
</div>

Here is an example of a standard card:

https://i.stack.imgur.com/HHtqH.png

Once selected, I want the border color of the card to be darkened and the width increased: https://i.stack.imgur.com/dERfz.png

Furthermore, upon selecting a card, I aim to retrieve the ID or values of the selected card.

reactjsbootstrap-5

Answer №1

To tackle this issue, there are numerous methods available. Here is a straightforward illustration to guide you through the process. Initially, establish a state and then implement the following code: 

const [check, setcheck] = useState('');

<div class="card" style={check === 'male' ? border: '5px solid #000'} : null} onClick={() => setcheck('male')}>
            <img class="card-img-top" src="" alt="Cardimage" />
            <div class="card-body">
                <h4 class="card-title">John Doe</h4>
                <p class="card-text">Some Text</p>
            </div>
        </div>

        <div class="card" style={check === 'female' ? {border: '5px solid #000'} : null} onClick={() => setcheck('female')} >
            <img class="card-img-top" src="" alt="Cardimage" />
            <div class="card-body">
                <h4 class="card-title">Jane Doe</h4>
                <p class="card-text">Another Example Text</p>
            </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

Editable Table Component in React

I've developed a React table as shown below: const CustomTable = ({content}) => { return ( <table className="table table-bordered"> <thead> <tr> <th>Quantity</ ...

javascriptreactjs

Experiencing issues with implementing npm package oddslib

Has anyone experienced issues with using the oddslib npm package for converting betting odds? I keep getting an error message stating "invalid odds" when trying to use this package. If you have any tips on how to properly utilize it or if you have successf ...

reactjsnpmreact-forms

Designing the Mailchimp signup form with React styling techniques

I downloaded the NPM React module for Mailchimp from this link: https://www.npmjs.com/package/react-mailchimp-form. It works well and provides all the necessary forms, but I'm having trouble customizing its style. The documentation suggests adding a ...

cssreactjsmailchimp

New to React and struggling with updating the DOM

Upon receiving a React project, I am faced with the task of performing a complex state update on my DOM. Here is how my component looks: /** @jsx jsx */ import { jsx } from '@emotion/core'; import { Typography } from '@material-ui/core&ap ...

reactjstypescript

Receiving errors in React/TS/material-ui when attempting to use a variable as a value for a grid property. Messages include "No overload matches" and "Type 'number' is not assignable to type..."

tl;dr: When using a variable as the value of a grid xs property in JSX, material-ui throws a TS error. I'm working on implementing grids in material-ui with React/TypeScript. The goal is to make the width of a specific element dependent on the quant ...

reactjstypescripttypesmaterial-ui

Error encountered when accessing color background in the state of Material UI

My eyes are feeling strained, and I'm working on implementing a slider that can adjust both the radius and color of a button. This sandbox successfully updates the radius. Here is the code: (Code content) Currently, my focus is on utilizing ...

reactjsbuttonmaterial-uibackground-colorcolor-picker

Manage the material-ui slider using play and pause buttons in a React JS application

I have a ReactJS project where I am utilizing the continuous slider component from material-ui. My goal is to be able to control the slider's movement by clicking on a play button to start it and stop button to halt it. Below is the code snippet of th ...

javascriptreactjsreact-hooksmaterial-ui

Elevate state in React to modify classNames of child elements

I have a structured set of data divided into 6 columns representing each level of the hierarchy. When a user makes selections, their chosen location is highlighted with a dynamic CSS class name and displays the relevant data list. I've managed to impl ...

javascriptreactjsstateevent-bubbling

changing the validation function from using if statements to utilizing switch statements

Currently, I am refactoring a form in react and planning to offload most of the state and logic to the parent component. This decision is made because the parent's state will be updated based on the form submission results. However, I encountered an i ...

javascriptreactjsecmascript-6refactoring

Is React Spring failing to trigger animations properly on iOS devices?

I have a code that functions perfectly on my desktop and across all browsers. Each button is designed to trigger a 4-second animation upon load or hover, initiating the playback of various videos. However, there's an issue with iOS where the video or ...

reactjstypescriptnext.jsreact-spring

Standardize API data for utilization in Redux

I have an API that provides the following data: const data = { id: 1, name: 'myboard', columns: [ { id: 1, name: 'col1', cards: [ { id: 1, name: 'card1' }, { id: 2, name: 'card ...

javascriptreactjsreduxnormalizr

What is the best way to incorporate scratch card animation into a React Native application?

How can I create a scratch card animation using React Native? What strategies should I consider in order to achieve this outcome? While I am aware of existing libraries that may assist with this task, I am particularly interested in exploring different ap ...

reactjsreact-native

Encountering the error message "Required property 'src' is missing in image" while using Next.js image functionality

Oh no! There seems to be an issue: The image is missing the required "src" property. Make sure you include the "src" in the props when using the next/image component. Received: {"width":48,"height":48} I'm having trouble underst ...

reactjsnext.jsnextjs-image

MySQL database encountered an error attempting to retrieve a frame for an index that is out of range (React Native)

Recently, I started my journey into learning react-native through instructional videos. However, the videos referenced the use of ListView, which is set to be deprecated and removed soon. After researching, it became clear that FlatList is the recommended ...

reactjsreact-nativelistviewnative

Struggling with React integration of AdminLTE3 sidebar treeview?

I have a requirement to create a React sidebar with a category 'Staff' that, when clicked, reveals three subordinate categories. Below is the code snippet: import React, { Component } from "react"; export default class Sidebar extends Componen ...

javascripthtmlreactjsbootstrap-4adminlte

Tips for maintaining wallet connectivity through page refresh with UseEffect

I am working on a function that utilizes the UseEffect to maintain wallet connectivity even when the page is refreshed. Here is the code snippet for my NavBar component: const NavBar = ({ accounts, setAccounts }) => { const isConnected = Boolean(acc ...

javascriptreactjsethereumuse-effect

The navigation reducer isn't being invoked during navigation

I've been working on implementing nested navigation using reactnavigation by creating a reducer as shown below: import AppNavigation from '../Navigation/AppNavigation' export const reducer = (state, action) => { const newState = AppNa ...

reactjsreact-nativereact-reduxreact-navigation

Toggle the state of a Material UI checkbox in ReactJS based on the data from hooks that return a true or checked value

I need assistance with checking/unchecking a checkbox value in an edit modal based on the return of addAdvisory(hooks) which is 'Y', indicating true/checked. Below is my basic code snippet: const [addAdvisory, setaddAdvisory] = useState({ SY ...

javascriptreactjsmaterial-ui

Is there a Material UI dialog popup that features an icon at the top?

My goal is to incorporate a dialog box with an icon at the top, like shown here: https://i.stack.imgur.com/0Kf10.png However, my current result looks like this: https://i.stack.imgur.com/WFcgh.png ...

reactjsmaterial-ui

Issue: A React component went into suspension during the rendering process, however, no alternative UI was designated

I'm currently experimenting with the code found at https://github.com/adarshpastakia/ant-extensions/tree/master/modules/searchbar Although I followed the tutorial instructions, I encountered an error. Could it be that the library is malfunctioning? I ...

javascriptreactjsnpmantdyarnpkg