Как сделать что бы в верстку попадал компонент со значением true?

Question

[D1ma5ta]

Есть два раздела, Offline и Online. Как сделать, что бы карточки в которых значение online:true попадали в раздел online? А остальные в раздел Online.

Верстка:

export function Price() {
  return (
    <div className={styles.wrapper}>
      <div className={styles.content_wrapper}>
        <h3 className={styles.title}>наши услуги</h3>
        <p className={styles.subtitle}>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore
        </p>
        <p className={styles.price_title}>
          <span className={styles.title_color}>online &</span> offline
        </p>
        <div className={styles.price_wrapper}>
        <Card />
        </div>
        <p className={styles.price_title}>offline</p>
        <div className={styles.price_wrapper}>
          <Card />
        </div>
        <Button />
      </div>
    </div>
  );
}

Карточки:

export function Card() {
  return (
    <>
      {cardArr.map((props) => (
        <div className={styles.price_card}>
          <div className={styles.card_wrapper}>
            <img src={props.img} alt="mic" className={styles.price_image} />
            <h3 className={styles.price_name}>{props.title}</h3>
            <p className={styles.price_subtitle}>{props.subtitle}</p>
            <p className={styles.price}>{props.price}</p>
          </div>
        </div>
      ))}
    </>
  );
}

Массив данных:

const cardArr = [
  {
    img: mixing,
    title: "Сведение и мастеринг",
    subtitle: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
    price: "от 4500 р",
    online: true,
  },
  {
    img: piano,
    title: "Создание аранжировки",
    subtitle: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
    price: "от 4500 р",
    online: false
  },
]

Comments

[Алексей Немиро]

filter?

Answer 1

[Семен Чернышев]

Можно пройтись по массиву cardArr с помощю filter

const cardsOnlineTrue = cardArr.filter(({online}) => online); // для true

const cardsOnlineFalse = cardArr.filter(({online}) => !online); // для false

и для каждого раздела будет свой массив