I have a component which has the color white if it is active and black if it is inactive. How can a pass the color black as a prop?
My code right now (it does nothing):
export function Card (props) {
return <div {...props} className={styles.gray} />
}
I want to use this component (called Card) in a ternary operator to show if the component is active or not.
Assuming that you are setting the active state outside of the card, here's the simple ternary pattern.
If active is defined outside of the card:
function Card({ isActive, ...props }) {
return (
<div
className={`${styles.gray} ${isActive ? styles.active : null}`}
{...props}
/>
)
}
Using a helper like clsx, it would look like:
<div className={
clsx(
styles.gray,
isActive ? styles.active : null,
)
} />
Is styles the name of your css style sheet and gray the selector?
There are a bunch of different ways to create this behavior, but an easy one if you have a props object with color as a prop, you can do:
<div style={{ color: props.color }}