# Rendering JSON into React, a little advice

**URL:** <https://forum.freecodecamp.org/t/rendering-json-into-react-a-little-advice/358066>\
**Category:** General\
**Created:** [March 11, 2020, 7:01pm UTC](https://forum.freecodecamp.org/t/rendering-json-into-react-a-little-advice/358066 "2020-03-11T19:01:45Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Imstupidpleasehelp](https://avatars.discourse-cdn.com/v4/letter/i/7ab992/32.png) [@Imstupidpleasehelp](https://forum.freecodecamp.org/u/Imstupidpleasehelp)\
**Post date:** [March 11, 2020, 7:01pm UTC](https://forum.freecodecamp.org/t/rendering-json-into-react-a-little-advice/358066/1 "2020-03-11T19:01:45Z")

</div>

Hello everyone. I am having a bit of an issue with my project.  
I am trying to have a JSON file that contains infomation, and then have it render a JSX element to the page.  
Sadly nothing is showing up. If there were an error message I would google it and go at it from there. But there’s no error message, just a blank page where items should be.  
My JSON

```auto
{
  "ServiceItem": [
    {
      "name":"Yeet",
      "description":"Test",
      "projectImage": "cat.jpg",
      "url":"#"
    }
  ]
}

```

And I am trying to have it render some JSX with this code

```auto
 class ServiceItem extends Component {
     state = { ServiceItem: []
     }
     render() { 
        if(this.props.data){
            var ServiceItem = this.props.data.ServiceItem.map(function(ServiceItem){
              var projectImage = 'public/serviceImages'+ServiceItem.projectImage;
              return <div key={ServiceItem.name} className="columns service-item">
                 <div className="item-wrap">
                  <a href={ServiceItem.url} title={ServiceItem.name}>
                     <img className="projectImage" alt={ServiceItem.title} src={projectImage} />
                     <div className="overlay">
                        <div className="service-item-meta">
                       <h5>{ServiceItem.name}</h5>
                           <p>{ServiceItem.description}</p>
                        </div>
                      </div>
                    
                  </a>
                </div>
              </div>
            })
          }
         return ( <div>{ServiceItem}</div> );
     }
 }

```

Since there’s no error message, I am a bit stuck. Any help would be appreciated.  
Thank you.

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [March 11, 2020, 8:15pm UTC](https://forum.freecodecamp.org/t/rendering-json-into-react-a-little-advice/358066/2 "2020-03-11T20:15:34Z")

</div>

How are you getting to the JSON?

How are you passing it to the component?

If you log `this.props.data` do you get the JSON?

Without seeing the full code it’s hard to help. Post a GitHub link or use something like [codesandbox](https://codesandbox.io) to post the code.

Edit: do you really need a class component? I’d suggest using function components when possible and [hooks](https://reactjs.org/docs/hooks-intro.html).

---

<div class="post-metadata">

**Author:** ![Imstupidpleasehelp](https://avatars.discourse-cdn.com/v4/letter/i/7ab992/32.png) [@Imstupidpleasehelp](https://forum.freecodecamp.org/u/Imstupidpleasehelp)\
**Post date:** [March 12, 2020, 11:42pm UTC](https://forum.freecodecamp.org/t/rendering-json-into-react-a-little-advice/358066/3 "2020-03-12T23:42:17Z")

</div>

Thanks for the reply. I think you found my issue without even seeing the full code. I don’t think the JSON is connecting to the JSX, I will work on this.  
Thanks for helping me get unstuck

---

<div class="post-metadata">

**Author:** ![Imstupidpleasehelp](https://avatars.discourse-cdn.com/v4/letter/i/7ab992/32.png) [@Imstupidpleasehelp](https://forum.freecodecamp.org/u/Imstupidpleasehelp)\
**Post date:** [March 13, 2020, 2:53am UTC](https://forum.freecodecamp.org/t/rendering-json-into-react-a-little-advice/358066/4 "2020-03-13T02:53:38Z")

</div>

I am having a bit of trouble passing data on to the services component. I am trying to do it as such

```auto
<Route path="/services" component={Services} data={this.state.Services.ServicesJSON} />

```

However you can probably guess that it’s not working as intended.  
Here is the github link to the full code, I have rolled back some changes because my code got a little pasta-y  
[https://github.com/Imstupidpleasehelp/FitnessWebsite-](https://github.com/Imstupidpleasehelp/FitnessWebsite-)  
Thanks again.

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [March 13, 2020, 4:29pm UTC](https://forum.freecodecamp.org/t/rendering-json-into-react-a-little-advice/358066/5 "2020-03-13T16:29:57Z")

</div>

Did you delete the repo? I can’t find it.

---

<div class="post-metadata">

**Author:** ![Imstupidpleasehelp](https://avatars.discourse-cdn.com/v4/letter/i/7ab992/32.png) [@Imstupidpleasehelp](https://forum.freecodecamp.org/u/Imstupidpleasehelp)\
**Post date:** [March 14, 2020, 6:40pm UTC](https://forum.freecodecamp.org/t/rendering-json-into-react-a-little-advice/358066/6 "2020-03-14T18:40:19Z")

</div>

Whoops! Sorry it was private on accident.  
And sorry for these late replies, because of this pandemic I am being called in to work all the time and I’m not checking FCC.

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [March 14, 2020, 7:33pm UTC](https://forum.freecodecamp.org/t/rendering-json-into-react-a-little-advice/358066/7 "2020-03-14T19:33:28Z")

</div>

1.You have `{this.state.resumeData.ServiceItem}`, it should be, `{this.state.ServiceItems.ServiceItem}`

1. You can’t pass props like you are to the component in `<Route>` ( [Route props](https://reacttraining.com/react-router/web/api/Route/route-props))

Here is one way, taken from [this page](https://tylermcginnis.com/react-router-pass-props-to-components/).

```auto
<Route
  path="/services"
  render={props => (
    <Services
      {...props}
      data={this.state.ServiceItems.ServiceItem}
    />
  )}
/>

```

1. In the Services component it should be `this.props.data.map` not `this.props.data.Services.map`

---

<div class="post-metadata">

**Author:** ![Imstupidpleasehelp](https://avatars.discourse-cdn.com/v4/letter/i/7ab992/32.png) [@Imstupidpleasehelp](https://forum.freecodecamp.org/u/Imstupidpleasehelp)\
**Post date:** [March 15, 2020, 2:08am UTC](https://forum.freecodecamp.org/t/rendering-json-into-react-a-little-advice/358066/8 "2020-03-15T02:08:33Z")

</div>

Thank you so much for your continued assistance.  
You’ve solved my problem, I hope one day to return the favor to you.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 7:33pm UTC](https://forum.freecodecamp.org/t/rendering-json-into-react-a-little-advice/358066/9 "2021-06-01T19:33:01Z")

</div>

Closed on June 1, 2021, 7:33pm UTC