How can I display count of mapped looped items in React

Question

Notice in the code sample below that I'm mapping all the data into ResultItems

    {store.results.data.map( result =>
                                <ResultItem key={result.id}
                                title={result.title}
                                description={result.description}
                                start_date={result.start_date}
                                end_date={result.end_date}
                                vendor_name={result.vendor.name}
                                buyer_name={result.buyer.name}
                                preview_file={result.preview_file}
                                status={result.status}
                                />)}

what I want to do is keep count of how many resultitems there are and display that number in the DOM

Any ideas on how to do that?

such a simple solution! it's late over here, I'm not thinking...too bad I can't vote this as best answer — Algorithmic Programmer
– Algorithmic Programmer, Commented Feb 16, 2018 at 10:01
Possible duplicate of NodeJS Count how many objects in array? — Michał Perłakowski
– Michał Perłakowski, Commented Feb 16, 2018 at 10:05

Rodius · Accepted Answer · 2018-02-16 10:00:08Z

0

Use the length of the array to know how many items the array has or if you want to access each one just use the index of the map function.

    const length = store.results.data.length

    {store.results.data.map( (result, index) =>
           <ResultItem
               position={index}
               (...)
           />
    )}

answered Feb 16, 2018 at 10:00

Rodius

2,32117 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

How can I display count of mapped looped items in React

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related