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 — MarisolFigueroa, Feb 16 '18 at 10:01
Possible duplicate of [NodeJS Count how many objects in array?](https://stackoverflow.com/questions/29092193/nodejs-count-how-many-objects-in-array) — Michał Perłakowski, Feb 16 '18 at 10:05

score 0 · Answer 1 · answered Feb 16 '18 at 10:00

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}
               (...)
           />
    )}

How can I display count of mapped looped items in React

1 Answers1