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 method is correct. use the map function to iterate through the array.

export default class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
          data: [{"id": "01", "name": "Hi"}, {"id": "02", "name": "Hello"}];
        };
 }
    render(){
        return(
            
           
                {this.state.data.map((data,index)=>
                      {data.name}
                )}             
        );
    }
}