react - display data from object

const Services = () => (
  <div>
    {services.map(service => (
      <div className={service.class}>
        <p>{service.id}</p>
        <p>{service.name}</p>
      </div>
    ))}
  </div>
);

var services =
      [{
        "id": 1,
        "name": "artykuły poradnikowe",
        "price": 10,
        "class": "sprite-Image-8"
      },
      {
        "id": 2,
        "name": "artykuły informacyjne",
        "price": 17,
        "class": "sprite-Image-9"
      },
      {
        "id": 3,
        "name": "artykuły specjalistyczne",
        "price": 30,
        "class": "sprite-Image-10"
      },
      {
        "id": 4,
        "name": "content reklamowy",
        "price": "nie",
        "class": "sprite-Image-11",
        "infoTitle": "Napisz do nas, by otrzymać indywidualną wycenę. Orientacyjna wycena to:",
        "infoList": [
          "ulotki: (50 zł za 1500 zzs)",
          "artykuły do gazet (40 zł/1k zzs)",
          "broszury (50 zł za 1500 zzs)."
        ]
      },
      {"id": 5, "name": "teksty seo", "price": 15, "class": "sprite-Image-12"},
      {
        "id": 6,
        "name": "prowadzenie blogów",
        "price": "nie",
        "infoTitle": "Prowadzenie bloga  – doprecyzuj: ile wpisów miesięcznie",
        "infoList": [
          "Stawka bazowa za 4 wpisy w miesiącu: 300 zł netto/mc"
        ],
        "class": "sprite-Image-13"
      },
      {"id": 7, "name": "opisy kategorii i produktów", "price": 12, "class": "sprite-Image-14"},
      {"id": 8, "name": "email marketing", "price": 55, "class": "sprite-Image-15"},
      {"id": 9, "name": "pisanie e-booków", "price": 38, "class": "sprite-Image-16"},
      {"id": 10, "name": "content na strony WWW", "price": 25, "class": "sprite-Image-17"},
      {
        "id": 11,
        "name": "prowadzenie fanpage",
        "price": "nie",
        "infoTitle": "Cena zależy od ilości wpisów",
        "infoList": [
          "Stawka bazowa: 300 zł netto za 4 wpisy w miesiącu i moderację komentarzy",
          "Stawka rośnie +25 zł z każdym wpisem."],
        "class": "sprite-Image-18"
      },
      {"id": 13, "name": "tłumaczenia tekstów technicznych", "price": 30, "class": "sprite-Image-20"},
      {"id": 14, "name": "ghostwriting", "price": 20, "class": "sprite-Image-22"},
      {"id": 15, "name": "korekta i redakcja", "price": "", "class": "sprite-Image-21"},
      {
        "id": 12,
        "name": "usługa indywidualna",
        "price": "nie",
        "infoTitle": "Usługa wyceniana indywidualnie. Napisz do nas, by dowiedzieć się więcej",
        "class": "sprite-Image-19"
      }];



ReactDOM.render(<Services services={services} />, document.getElementById('root'));