Styling a specific item from a array list in javascript-CodePudding

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. Any suggestions?

CodePudding user response：

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.

CodePudding user response：

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>
    ))}