How to output JSON data in React?

Question

JavaScript

I am able to output data from a JSON file.
But, I have all the information displayed in one component.

That is, for example, if I display a component on the main page, then everything displays all components in 1. And I need 1 component when I call the Item component. And as I understand it, then you need to make a cycle on the main one and display all these components ?!

<div className="main__content__items">
        <Item />
</div>

For example, there is a json structure:

{
    "Pizza": [
        {
            "id": 0,
            "Name": "Пепперони Фреш с томатами",
            "Image": "https://cdn.dodostatic.net/static/Img/Products/f57b939a4455453daade38016f61d766_233x233.jpeg",
            "Dimention": [{
                "small": 25,
                "medium": 30,
                "large": 35
            }],
            "Type": ["traditional", "thin"],
            "Price": "149"
        },

        {
            "id": 1,
            "Name": "Пепперони Фреш с перцем",
            "Image": "https://cdn.dodostatic.net/static/Img/Products/f035c7f46c0844069722f2bb3ee9f113_233x233.jpeg",
            "Dimention": [{
                "small": 25,
                "medium": 30,
                "large": 35
            }],
            "Type": ["traditional", "thin"],
            "Price": "179"
        },

How I displayed the data in the react component:

render() {
        return (
            <div className="item">
              {
                PizzaInfo.Pizza.map((pizza, i) => {
                  return(
                    <div key={i}>
                      <img src={pizza.Image} alt="pizza1" className="item-preview"/>
                      <h3 className="item-name">{ pizza.Name }</h3>
                      <div className="item-dimantion">
                        {
                          pizza.Type.map((type) => {
                            return (
                              <ul className="asd">
                                <li className="choice">{type}</li>
                                <li className="choice active">{type}</li>
                              </ul>
                            )
                          })
                        }

                        {
                          pizza.Dimention.map((dimention) => {
                            return (
                              <ul className="asd">
                                <li className="choice active">{dimention.small} см.</li>
                                <li className="choice">{dimention.medium} см.</li>
                                <li className="choice">{dimention.large} см.</li>
                              </ul>
                            )
                          })
                        }
                      </div>

                      <div className="more">
                          <h4 className="price">от { pizza.Price } грн</h4>
                          <button className="add">Добавить</button>
                      </div>
                    </div>
                  )
                })
              }
            </div>
        )
    }

Answer 1

You have one written in JSX <div className="Item">. You need to draw as many Items as there are elements in the Pizza.
It is more correct to draw in another file Item, and call the method in this file mapand propspass the data through.
As a result, as many Items will be drawn as there are elements in the array.