Как вывести данные JSON в React?

Question

[embiid]

У меня получается вывести данные из JSON файла.
Но, у меня выводится в одном компоненты вся информация.

Тоесть к примеру, если я вывожу на главной странице компонент, то все выводит все колмпоненты в 1. А мне нужно 1 компонент когда я вызываю компонент Item. И как я понимаю потом нужно сделать цикл на главной и вывести эти все компоненты?!

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

К примеру есть json структура:

{
    "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"
        },

Как я вывел данные в реак компоненте:

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

[n1ksON]

У вас в JSX написан один <div className="Item">. Вам нужно отрисовать столько Item'ов, сколько элементов в массиве Pizza.
Правильнее в другом файле отрисовать Item, а в этом файле вызвать метод map и через props передать данные.
В итоге, отрисуется столько Item'ов, сколько элементов в массиве.