Table of Cards

afshinshahpari@gmail.com commented 6 years ago

Hi @Jakub,Thanks for your advice. The problem is not just scrolling, I need also to connect it easily to an array and each card is a row of a grid. I need to have row index to refer to related node of array. in this case what is the best scenario?Thanks

Jakub Mandra staff premium commented 6 years ago

I think I would just use regular map function in this case to build all the markup.

    <MDBScrollBar>  
      {
          cardArr.map((card, index) => 
            <MDBRow id={index} key={card.id}>
              <MDBCard>
                (...)
              </MDBCard>
            </MDBRow>
          )
        }
  </MDBScrollBar>

afshinshahpari@gmail.com commented 6 years ago

Hi jakub,

Thanks for the code sample.

I get blank screen after using the mentioned code but when I remove "MDBScrollBar> and use the rest of your code, it shows the array content without scroll bar.Even when using the scrollbar sample shown in tutorial it shows blank Screen!

I am using react 4.11.

  <MDBScrollBar>
    <img
      alt=""
      src="https://mdbootstrap.com/img/Photos/Others/img%20(51).jpg"
    />
  </MDBScrollBar>

Jakub Mandra staff premium commented 6 years ago

As in documentation, MDBScrollbar has to be wrapped inside some container with defined max height and/or width to work.

Try this code (remember to attach your variables):

import React from "react";
import { MDBContainer, MDBScrollbar, MDBRow, MDBCard } from "mdbreact";

const ScrollBarPage = () => {
  return (
    <MDBContainer style={{ width: "800px", height: "400px" }} className="mt-5">
      <MDBScrollbar>
        {
          cardArr.map((card, index) =>
            <MDBRow id={index} key={card.id}>
              <MDBCard>
                (...)
              </MDBCard>
            </MDBRow>
          )
        }
      </MDBScrollbar>
    </MDBContainer>
  );
}

export default ScrollBarPage;