React map data to tailwind grid

Question

I want to render the users who has property eligible: true to a grid using tailwind css

  const users = [
    {
      name: 'John',
      age: 23,
      pic: 'someUrl'
      eligible: true
    },
    {
      name: 'Marie',
      age: 6,
      pic: 'someUrl'
      eligible: false
    },
    {
      name: 'David',
      age: 30,
      pic: 'someUrl'
      eligible: true
    },
    {
      name: 'Sarah',
      age: 20,
      pic: 'someUrl'
      eligible: true
    }
  ]

---

     <ul className="grid grid-rows-3 grid-flow-col gap-4 mt-4 px-10">
        {users.map((user) =>
          user.eligible ? (
            <>
              <li className="shadow-lg bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg row-span-3 col-span-1">
                {user.name}
              <img src={user.pic} />
              </li>
              <li className="shadow-lg bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg row-span-2">
                {user.name}
              <img src={user.pic} />
              </li>
              <li className="shadow-lg bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg">
                {user.name}
              <img src={user.pic} />
              </li>
            </>
          ) : (
            ''
          )
        )}
      </ul>

With the above code three grids are created for a single user, and total 9 grids are created instead of 3. I could not wrap my head around to find a solution. I would appreciate if anyone could give me a hint. I am trying to achieve a grid exactly like this The grid in my mind

Answer 1

I'm not sure if there is a better way to do this but here is my try :

APP.js

import React from "react";
import TestS from "./components/TestS";
function App() {
  return (
    <div className="relative w-full  ">
      <TestS />
    </div>
  );
}

export default App;

TestS.jsx

Read the comments if there is something not clear

import React, { useState } from "react";

function TestS() {
  // this variable will be used inside (map) later to decide which style will be rendered
  let [count] = useState(0);
  const users = [
    {
      name: "John",
      age: 23,
      pic: "https://picsum.photos/200",
      eligible: true
    },
    {
      name: "Marie",
      age: 6,
      pic: "https://picsum.photos/200",
      eligible: false
    },
    {
      name: "David",
      age: 30,
      pic: "https://picsum.photos/200",
      eligible: true
    },
    {
      name: "Sarah",
      age: 20,
      pic: "https://picsum.photos/200",
      eligible: true
    }
  ];

  return (
    <div className="  ">
      <ul className="grid grid-rows-3 grid-flow-col gap-4 mt-4 px-10">
        {users.map((user, id) => {
          // eslint-disable-next-line
          if (user.eligible) {
            // Once there is an object passed the (if) statment the count will increase by 1 first
            count = count + 1;
            return (
              // Now it's clear that the returned element with the desired values
              // will be rendered with the classes that you specify
              count === 1 ? (
                <li
                  key={id}
                  className="shadow-lg bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg row-span-3 col-span-1"
                >
                  {user.name}
                  <img
                    alt="person pic"
                    src={user.pic}
                    className="w-24 h-24 object-fill"
                  />
                </li>
              ) : count === 2 ? (
                <li
                  key={id}
                  className="shadow-lg bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg"
                >
                  {user.name}
                  <img
                    alt="person pic"
                    src={user.pic}
                    className="w-24 h-24 object-fill"
                  />
                </li>
              ) : count === 3 ? (
                <li
                  key={id}
                  className="shadow-lg bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg row-span-2"
                >
                  {user.name}
                  <img
                    alt="person pic"
                    src={user.pic}
                    className="w-24 h-24 object-fill"
                  />
                </li>
              ) : (
                <h1>somthing wentt wrong</h1>
              )
            );
          }
          // eslint-disable-next-line
        })}
      </ul>
    </div>
  );
}

export default TestS;

See it LIVE on codesandbox