Most efficient way of rendering JSX elements when iterating on array of data in React

Question

I have an array which contains objects. I am creating a map of this array to renders the names with a span component.

let data = [{\"id\": \"01\         


        

Answer 1

The first way is better.

1. Array.prototype.map creates an array behind the scenes and returns it after applying the modification on each element. Functionality-1 creates two arrays, while Functionality-2 creates three.

2. Functionality-1 reads better. It's how React code usually being written. For a simple element like this, I'd save the const definition for items and put the map statement in the JSX to be returned directly.