Conditional class

Card

reverse={false}

Card Reverse

reverse={true}

Card.jsx

function Card({ children, reverse }) {
  return <div className={`card ${reverse && 'reverse'}`}>{children}</div>;
}
export default Card;

FeedbackItem.jsx

import Card from './shared/Card';

function FeedBackItem({ item }) {
  return (
    <Card reverse={true}>
      <div className='num-display'>{item.rating}</div>
      <div className='text-display'>{item.text}</div>
    </Card>
  );
}

export default FeedBackItem;