How to map with unique value in pattern-CodePudding

I have an array of contents that I am fetching from headless cms. I am putting them on grid and trying to make them start at different column, but I am struggling to find a way to go about it.

If I were to just render the items it would look like this, everything starts at column 1:

<div className="relative grid grid-cols-3">
  {projects.map((project) => (
        <div
          className={"col-start-1"}
          key={project.data.title}
        >
          <ProjectThumbnail/>
        </div>
      ))}
</div>

And this is what I am trying to achieve:

 <div className="relative grid grid-cols-3">

  <div className="col-start-1">
    <ProjectThumbnail/>
  </div>

  <div className="col-start-3>
    <ProjectThumbnail/>
  </div>

  <div className="col-start-2>
    <ProjectThumbnail/>
  </div>

  <div className="col-start-1">
    <ProjectThumbnail/>
  </div>

  <div className="col-start-3>
    <ProjectThumbnail/>
  </div>

  <div className="col-start-2>
    <ProjectThumbnail/>
  </div>

...

</div>

Thank you

CodePudding user response：

const classes = ["col-start-1", "col-start-3", "col-start-2"];

const projects = [
    {data: {title: 'Title 1'}},
    {data: {title: 'Title 2'}},
    {data: {title: 'Title 3'}},
    {data: {title: 'Title 4'}},
    {data: {title: 'Title 5'}},
    {data: {title: 'Title 6'}},
    {data: {title: 'Title 7'}}
];

function ProjectThumbnail({project}) {

    return <span>[{project.data.title}]</span>
}

function Grid({projects}) {

    return (
        <div className="relative grid grid-cols-3">
            {projects.map((project, idx) => (
                <div
                    className={classes[idx % classes.length]}
                    key={project.data.title}
                >
                    <ProjectThumbnail project={project}/>
                </div>
            ))}
        </div>
    );
}

function App() {

    return <Grid projects={projects}/>
}

CodePudding user response：

You could modify your projects by adding the col start number. For example something like below. I created an order array and using the modulus operator I'm appending it to each array element

let order = [1,3,2]
let projects = [{  title: "a"}, {  title: "b"}, {  title: "c"}, {  title: "d"}, {  title: "e"}, {  title: "f"}, {  title: "g"}]

projects = projects.map((e,i) => ({title: e.title,colStartNumber: order[i%order.length]}))
console.log(projects)

Then the jsx

<div className="relative grid grid-cols-3">
  {projects.map((project) => (
        <div
          className={`col-start-${project.colStartNumber}`}
          key={project.data.title}
        >
          <ProjectThumbnail/>
        </div>
      ))}
</div>

CodePudding user response：

Assuming you want the column to be 1,3 and 2, in that order, and repeating indefinitely, then you could use the index from map, and calculate the proper column number from that using remainders. Like this:

<div className="relative grid grid-cols-3">
  {projects.map((project, i) => (
        <div
          className={`col-start-${i % 3 === 0 ? 1 : (i % 3 === 1 ? 3 : 2)}`}
          key={project.data.title}
        >
          <ProjectThumbnail />
        </div>
      ))}
</div>