Question: I would like to programmatically repeat a section of JSX within an output. 
Below I would like to get the same effect as below without repeating the **PageLeft id="Diary"** component 3 times. I'd like to use a loop or something.

```
const DiaryPages = {

}

  return (
    <Fragment>
     <PageLeftDivider
      />
      <PageRight
  header={bookData[0].pageHeader}
  pageNumber={bookData[0].id}
  htmlContent={bookData[0].htmlContent}
  bookSection={bookData[0].bookSection}
      />

      <PageLeft id="Diary"
        pageHeader={bookData[1].pageHeader}
        pageNumber={bookData[1].id}
        htmlContent={bookData[1].htmlContent}
      />
      <PageLeft id="Diary"
        pageHeader={bookData[1].pageHeader}
        pageNumber={bookData[1].id}
        htmlContent={bookData[1].htmlContent}
      />

      <PageLeft id="Diary"
        pageHeader={bookData[1].pageHeader}
        pageNumber={bookData[1].id}
        htmlContent={bookData[1].htmlContent}
      />

    </Fragment>
  );
}

```

Answer: 
If you want to render 3 times exactly the same component then I guess you can use [`.map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) for that purpose as the following:

```
return <Fragment>
    {/* your other components */}

    {
       [1,2,3].map(e => <PageLeft id="Diary"
            pageHeader={bookData[1].pageHeader}
            pageNumber={bookData[1].id}
            htmlContent={bookData[1].htmlContent}
       />)
    }
</Fragment> 

```

As the documentation states for `.map()`:

> 
> The `map()` method creates a new array populated with the results of calling a provided function on every element in the calling array.
> 
> 
> 

So technically we are taking each elements from the array - *in this case 3 elements, does not matter what they are for now* - and returning the created **JSX** for each. That's how you can render elements.

Usually this is used to pick up data from an array, e.g.: id, name fields from an object and create a render format for elements of an array.

Suggested read from React documentation: [Lists and Keys](https://reactjs.org/docs/lists-and-keys.html)

I hope that helps!
Or assuming that you wanted a `<PageLeft />` for each entry in your `bookData` array, then you could remove the first entry with *.splice()* (as it is already displayed on `<PageRight />`) and then use *.map()*.

```
<>
   {bookData.splice(0,1).map( entry => <PageLeft id={"Diary" + entry.id}
        pageHeader={entry.pageHeader}
        pageNumber={entry.id}
        htmlContent={entry.htmlContent}
      />
   )}
</>

```

I added `id={"Diary" + entry.id}` so that each `<PageLeft />` has a *different* id.

*Note: the `<> </>` are just a short form of React Fragments*