Styling a specific item from a array list in JavaScript

Question

I have a design of colored line above each card text element but this design includes an extra line on the right side of the third card. No other card has this and I do not want it to repeat. Is there a way to make this happen through tailwind and JavaScript?

const TheCards = () => {
  const items = [
    {
      key: '1',
      tittle: 'Tittle1',
      content: 'First Paragraph of content',
    },
    {
      key: '2',
      tittle: 'Tittle2',
      content: 'Second Paragraph of content',
    },
    {
      key: '3',
      tittle: 'Tittle3',
      content: 'Third Paragraph of content.',
    },
    {
      key: '4',
      tittle: 'Tittle4',
      content: 'Fourth Paragraph of content.',
    },
 ]

 const select = items.filter((items) => items.key == 3)
  console.log(select)

  return (
    <>
      <div className="container grid grid-cols-3 gap-x-14 gap-y-28">
        {items.map((items) => (
          <div>
            <div className="border-t-2 border-gray-400 border-dashed ml-8 -mr-7">
              <div className="bg-blue-500 rounded-full h-8 w-8 -translate-y-5 -translate-x-9 text-white text-center pt-1">
                {items.key}
              </div>
            </div>
            <p className="text-2xl font-bold leading-9 text-gray-900">
              {items.tittle}
            </p>
            <p className="pt-4 leading-6 text-gray-200">
              {items.content}
            </p>
          </div>
        ))}
      </div>
    </>
  )
}
export default TheCards

I have tried selecting only the third key item from the array and while it does appear in the console I do not know how you can style it and then implement it in the return part of the code so it can show on the page.

Answer 1

You will have to add your condition inside the map itself, and conditionally render the element witht he correct style.

{items.map((item) => (
      <div>
        <div className={item.key === 3 ? "aSpecialStyle" : "border-t-2 border-gray-400 border-dashed ml-8 -mr-7"}>
          <div className="bg-blue-500 rounded-full h-8 w-8 -translate-y-5 -translate-x-9 text-white text-center pt-1">
            {items.key}
          </div>
        </div>
        <p className="text-2xl font-bold leading-9 text-gray-900">
          {items.tittle}
        </p>
        <p className="pt-4 leading-6 text-gray-200">
          {items.content}
        </p>
      </div>
    ))}

Replace "aSpecialStyle" with your custom tailwind css. But here you can see that if the item.key is 3 it will apply the special style or else it will render the default styles.

Answer 2

If you want to modify the 1st item in the list use the following code:

{items.map((item,index) => (
      <div>
        <div className={index === 1 ? "text-8xl" : "text-2xl"}>
            {items.key}
        </div>
        <div className={index === 1 ? "text-red-400" : "text-blue-400"}>
          {items.tittle}
        </div>
        <div className={index === 1 ? "bg-red-400" : "bg-blue-400"}>
          {items.content}
        </div>
      </div>
    ))}