I have a categories array from that I need to print Category ,category name, pictures and videos and comments.

this is my array

```
import React from 'react';  

function App() {  

 const categories = [
  {
      "Lots and Grounds": [
          {
              "categoryName": "Lots and Grounds",
              "prompt": "PORCH",
              "description": "Concrete",
              "rating": "Defective",
              "ratingAbbreviation": "T",
              "ratingColor": "#212121",
              "answerText": "bla bla blaaaaaa",
              "showOnSummary": "1",
              "isRepairSelected": 1,
              "repairAmountEntered": "110",
              "repairCommentEntered": null,
              "categoryDisclaimer": "bla bla bl;aaaaa",
              "subCategory": null,
              "pictures": [
                  "IMG_0856.JPG",
                  "IMG_0831.JPG",
                  "IMG_0848.JPG"
              ],
              "videos": [],
              "picture_decorations": {
                  "IMG_0856.JPG": [
                      {
                          "decoration_type": "0",
                          "decoration_color": "#D81919",
                          "decoration_begin_vertical": "0.41",
                          "decoration_begin_horizontal": "0.29",
                          "decoration_end_vertical": "0.64",
                          "decoration_end_horizontal": "0.40"
                      }
                  ],
                  "IMG_0831.JPG": [
                      {
                          "decoration_type": "0",
                          "decoration_color": "#D81919",
                          "decoration_begin_vertical": "0.25",
                          "decoration_begin_horizontal": "0.57",
                          "decoration_end_vertical": "0.47",
                          "decoration_end_horizontal": "0.52"
                      }
                  ],
                  "IMG_0848.JPG": [
                      {
                          "decoration_type": "1",
                          "decoration_color": "#D81919",
                          "decoration_begin_vertical": "0.08",
                          "decoration_begin_horizontal": "0.29",
                          "decoration_end_vertical": "0.45",
                          "decoration_end_horizontal": "0.71"
                      }
                  ]
              }
          },
          {
              "categoryName": "Lots and Grounds",
              "prompt": "VEGETATION",
              "description": "Trees, Shrubs",
              "rating": "Marginal",
              "ratingAbbreviation": "T",
              "ratingColor": "#212121",
              "answerText": "answer text here",
              "showOnSummary": "1",
              "isRepairSelected": 1,
              "repairAmountEntered": "1",
              "repairCommentEntered": null,
              "categoryDisclaimer": " disclaimer text here.",
              "subCategory": null,
              "pictures": [],
              "videos": [],
              "picture_decorations": []
          }
      ]
  }
];  

  return (  
    <div className="container">  
  <h1>CATEGORIES</h1>  
{categories.map((category, index) => (  
<div data-index={index}> 
<p>Category: Lots and Grounds): </p>  
<p>CategoryName {1} {category.categoryName}(for eg: )</p>  
<p>Prompt  {category.prompt}(for eg:PORCH )</p>  
<p>Pictures(from pictutes array): {}</p>  
<p>Picture decorations(from pictutes decorations array): {} </p>  
<p>Videos(from videos array): {} </p> 
<p>Credits: {category.repairAmountEntered} </p> 
<p>Comments: {category.repairCommentEntered} </p> 

</div>  
))}  

</div>  
);  
}  

export default App;  

```

here is the sandbox link for this. KIndly help
<https://codesandbox.io/s/quirky-silence-qhbf2?file=/src/App.js>

I need result as something like this(in driveway place prompt name appears)
[![enter image description here](https://i.stack.imgur.com/aZtY8.png)](https://i.stack.imgur.com/aZtY8.png)