How to pass in props to an element that changes in size depending on prop-CodePudding

I am having a hard time wrapping my head around props. I'd like to use a card shape in different components, and it be resized depending on which component it's in. For instance, if it's in a component at the bottom of the page, it will be big-sized; if in a component at the top of the page, then small-sized. I hope this makes sense. I just have the following code:

import React from 'react'

const Card = () => {
  return (
    <div className='card'>
        
    </div>
  )
}

export default Card;

I don't know where to put the props and how I would go about to pass them in, I really need it dumbed down for me, maybe an example. Any help would be appreciated.

CodePudding user response：

on parent component pass your props

<Card ComponentA={true) ComponentB={false}/>

or simply

<Card ComponentA/>

on Card component

const Card = ({ComponentA}) => {
  return (
    <div className={ComponentA ? "big-card" : "small-card"}>
        
    </div>
  )
}

you can also use props this way if you prefer

const Card = (props) => {
  return (
    <div className={props.ComponentA ? "big-card" : "small-card"}>
        
    </div>
  )
}