How to make bootstraps 5 entire Card select like radio and checkable like checkbox-CodePudding

I create react js app and use simple bootstraps 5 cards. I want to make the whole card select as radio like if male or female options and whole card checked like checkable or something we identify selected card.

<div  style="width:400px">
   <img  src="" alt="Card image" style="width:100%">
 <div >
   <h4 >John Doe</h4>
   <p >Some Text</p>
 </div>
</div>

and normal card see below like

and after selected see border-color dark and width

and after selecting, I want the selected card id or values.

CodePudding user response：

There are many ways to solve this problem. I showing you a very simple example. At first, you set a state and then use this code const [check, setcheck] = useState('');

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

        <div  style={check === 'female' ? {border: '5px solid #000'} : null} onClick={() => setcheck('female')} >
            <img  src="" alt="Cardimage" />
            <div >
                <h4 >John Doe</h4>
                <p >Some Text</p>
            </div>
        </div>