How to get last item in map function in React

Question

I have an array of data that is returned to me from a CMS. I map over each item and return a component 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>
)

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

Quentin · Accepted Answer · 2021-02-22 10:19:10Z

7

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

answered Feb 22, 2021 at 10:19

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mehdi momenpoor · Accepted Answer · 2021-02-22 10:45:37Z

2

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>

answered Feb 22, 2021 at 10:45

mehdi momenpoor

545 bronze badges

1 Comment

mehdi momenpoor Over a year ago

and also you must use key={item.id} instead of id={item.id} in <ButtonComponent />

Collectives™ on Stack Overflow

How to get last item in map function in React

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related