reactjs - 如何在 ReactJS 中同时显示占用和空床？

Question

我正在尝试显示已占用的床位和空/空床位。我使用了下面的代码，但我成功地只显示了空床和无用的空循环床。

data &&
  data.map((room) => (
    <div className='mt-1' key={room._id}>
      <div className='row'>
        <div className='col-2'>
          <span className='btn btn-light btn-lg rounded-0'>
            {room.department.name.toUpperCase()}
          </span>
        </div>
        <div className='col-10'>
          <span className='btn btn-light btn-lg rounded-0 mx-1'>
            {room.name.toUpperCase()}
          </span>
          {patientsData &&
            patientsData.map(
              (patient) =>
                patient.department === room.department.name &&
                [...Array(room.bed).keys()].map(
                  (x) =>
                    x + 1 !== patient.bed && (
                      <span
                        key={x + 1}
                        className={`btn  btn-lg rounded-0 mx-1 ${
                          patient.status === 'Admitted' &&
                          !patient.bed.includes(x + 1)
                            ? 'bg-success'
                            : 'bg-danger'
                        } `}
                      >
                        {patient.status === 'Admitted' &&
                          !patient.bed.includes(x + 1) &&
                          x + 1}{' '}
                      </span>
                    )
                )
            )}
        </div>
      </div>
    </div>
  ))

这是我到目前为止的结果

标签： reactjs