Как обернуть компоненты в тег при уменьшении экрана?

Question

[Danoneko]

Добрый день!

Подскажите пожалуйста, как сделать так, чтобы при уменьшении экрана (max-width: 768px) компоненты FiltersUser обворачивало другим куском кода, Accordion.

<div className="external-container__filters">
      <FiltersUser setValue={setTeachers} nameuser="teacher" titlefilter="Преподаватели"/>
      <FiltersUser setValue={setStudents} nameuser="student" titlefilter="Студенты"/>
      <FiltersStatus setValue={setStatus} titlefilter="Статусы"/>
 </div>

<div className="external-container__filters">
      <Accordion className="external-container__filters--phone">
          <Accordion.Item eventKey="0">
            <Accordion.Header>
              <img src={filterImg} alt="Фильтры" className="filters__img" />
              <div className="text-m">Фильтры (3)</div>
            </Accordion.Header>
            <Accordion.Body>
              // ВСТАВИТЬ СЮДА
            </Accordion.Body>
          </Accordion.Item>
        </Accordion>
      </div>

Comments

[Danoneko]

Если нет, может быть есть какой-то другой способ заменить первый кусок кода вторым, при этом сохранить результаты коллбэка фильтров

[n1ksON]

можно проверять ширину экрана и брать нужный компонент для каждого из условий

{ window.width > 768 ? <Desktop> content </Desktop> : <Mobile> content </Mobile> }