I have an array of data that is returned to me from a CMS. I map over each item and return a ponent with the corresponding data. However, I need to target the last item in the .map function in the render method as the last item needs some modification.

How would I do this?

return (
  <div>
    {data.body.map((item, i) => {
      console.log(i);
      if (item.type === 'button') {
        return <ButtonComponent color="ffffff" bgColor="4C319D" text={item.text} textAlign="left" id={item.id} />
      }
    })}
  </div>
)

I have an array of data that is returned to me from a CMS. I map over each item and return a ponent with the corresponding data. However, I need to target the last item in the .map function in the render method as the last item needs some modification.

How would I do this?

return (
  <div>
    {data.body.map((item, i) => {
      console.log(i);
      if (item.type === 'button') {
        return <ButtonComponent color="ffffff" bgColor="4C319D" text={item.text} textAlign="left" id={item.id} />
      }
    })}
  </div>
)

• javascript
• reactjs

• Does this answer your question? Get the last item in an array – Danila Commented Feb 22, 2021 at 10:30

2 Answers 2

Test the index against the length of the array.

const array = ['a', 'b', 'c', 'd'];

const mapped = array.map(
    (value, index, array) => {
        if (array.length - 1 === index) {
            console.log(`${value} is the last item in the array`);
            return `-->${value.toUpperCase()}<--`;  
        } else {
            return value.toLowerCase();  
        }
    } 
);

console.log({mapped});

generally for access to the last item in array you can use this Formula:

const myArray = [1,2,3,4];

myArray[myArray.length - 1] // return 4.

and in your code you can use this way:

<div>
      {data.body.map((item, i) => {
        console.log(i);
        if (item.type === 'button') {
          return <ButtonComponent color="ffffff" bgColor="4C319D" text={item.text} textAlign="left" id={item.id} />
        }
        const lastItem = data.body[data.body.length - 1]
      })}


    </div>