Show block above another component

Now I have a timer block only above USER 1, how can I display the timer block only above USER 2?

There was a logic to create as many <th> as users, and then add the Timer component to the required <th>, but I can’t figure out how to select the specific <th> in which you need to add Timer

 
return (
<div className="container">
        <table className="table">
          <thead className="move">
            <th>MOVE</th>
            {
              [...Array(1)].map((index) => (
                <th key={index}>
                  <Timer minutes={minutes} seconds={seconds} />
                </th>
              ))
            }
          </thead>
          <thead className="thead">
            <th className="main">PARAMETERS REQUIREMENTS</th>

            {users.map((user) => (
              <th className="trade_user" key={user.id}>
                {user.name}
              </th>
            ))}
          </thead>
          <tbody>
            <tr>
              <td className="main">
                Availability of a set of measures that raise quality standards
                manufacturing
              </td>
              {users.map((user) => (
                <td className="trade_user" key={user.id}>
                  {user.complexesOfMeasures}
                </td>
              ))}
            </tr>
            <tr>
              <td className="main"> Lot production time, days</td>
              {users.map((user) => (
                <td className="trade_user" key={user.id}>
                  {user.productionPeriod}
                </td>
              ))}
            </tr>
            <tr>
              <td className="main">Warranty obligations, months</td>
              {users.map((user) => (
                <td className="trade_user" key={user.id}>
                  {user.warranty}
                </td>
              ))}
            </tr>
            <tr>
              <td className="main">Terms of payment</td>
              {users.map((user) => (
                <td className="trade_user" key={user.id}>
                  {user.paymentTerms}%
                </td>
              ))}
            </tr>
            <tr>
              <td className="main">The cost of manufacturing a lot</td>
              {users.map((user) => (
                <td className="trade_user cost" key={user.id}>
                  {user.cost}
                </td>
              ))}
            </tr>
            <tr>
              <td className="main">Actions:</td>
              {users.map((user) => (
                <td className="trade_user" key={user.id}>
                  {user.action}
                </td>
              ))}
            </tr>
          </tbody>
        </table>
      </div>
)

Component Timer

import React from "react";
import { CgSandClock } from "react-icons/cg";

export const Timer = ({ minutes, seconds }) => {
  return (
    <div className="move_time">
      <span>{minutes}</span>
      <span>:</span>
      <span>{seconds}</span>
      <div>
        <CgSandClock size="1.5em" className="move_item_clock" />
      </div>
    </div>
  );
};

>Solution :

One way to display the timer block only above USER 2 is to add a condition inside the map function that renders the table cells. You can use the user’s id to check if it matches USER 2’s id, and if it does, render the Timer component. For example, you can add a prop called "userId" to the Timer component and pass the user’s id from the map function. Then you can use this prop in a ternary operator inside the Timer component to check if it matches the id of USER 2 and render the timer only if it matches.

Here is an example of how you can modify the code:

return (
  <div className="container">
    <table className="table">
      <thead className="move">
        <th>MOVE</th>
        {
          [...Array(1)].map((index) => (
            <th key={index}>
              <Timer minutes={minutes} seconds={seconds} />
            </th>
          ))
        }
      </thead>
      <thead className="thead">
        <th className="main">PARAMETERS REQUIREMENTS</th>
        {users.map((user) => (
          <th className="trade_user" key={user.id}>
            {user.name}
            {user.id === 2 && <Timer minutes={minutes} seconds={seconds} userId={user.id} />}
          </th>
        ))}
      </thead>
      <tbody>
        {/* Other table rows */}
      </tbody>
    </table>
  </div>
);

Timer component

export const Timer = ({ minutes, seconds, userId }) => {
  return (
    userId === 2 ? (
      <div className="move_time">
        <span>{minutes}</span>
        <span>:</span>
        <span>{seconds}</span>
        <div>
          <CgSandClock size="1.5em" className="move_item_clock" />
        </div>
      </div>
    ) : null
  );
};

This way, the Timer component will be rendered only if the userId prop matches the id of USER 2.