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?

Answer 1

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