Rendering JSON into React, a little advice

#1

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

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

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

 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.

#2

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 to post the code.

Edit: do you really need a class component? I’d suggest using function components when possible and hooks.

1 Like
#3

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

#4

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

<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-
Thanks again.

#5

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

#6

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.

#7

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)

Here is one way, taken from this page.

<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
1 Like
#8

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

#9