how to dynamically render reactjs components from json data

Question

I have some json data. 3 different objects. I would like to take the data from those objects and present it on the screen. basically each object has a name, summary and icon. so I'd like to go through all 3 of these objects and display on the screen each icon, name and summary. these objects are featured apps. they are displayed in a grid. each app has its own badge. the badge is in the AppBadgeHomePage.js file.

right now nothing is rendering. I get the h3 tag and that's it. there's a div class for "featured" but there is nothing below. it seems the this.state.feat.map is broken. or not working. or maybe it is and there's just nothing getting passed to the app badge. I call the featured apps grid in another file just fine. I'm just wondering if this is one of those cases where I'm too tired and have been staring at this for too long.

the json data looks like this. the icon and summary are in a customData object.

{
 name: appName,
 customData: {
     icon: iconURL,
     summary: summary
  }
 }

Marketplace.js

import AppBadgeHomePage from './AppBadgeHomePage';
import React, { Component } from 'react';

export default class FeaturedGrid extends React.Component {
    
    constructor(props){
        super(props);
        this.getFeaturedApps = this.getFeaturedApps.bind(this);
        let name, summary, icon;
    }
    
    state = {
        feat: []
    }

    getFeaturedApps = () => {
        fetch(`http://localhost:3001/apps/featured`)
        .then(response => response.json())
        .then(responseJson => {
            this.setState({
                feat: responseJson.map(item => ({
                    name: item.name,
                    icon: item.customData.icon,
                    summary: item.customData.summary
                }))
            })
        })
    }
    render(){
        return (
            <div>
                <h3>Featured Apps</h3>
                    <div className="featured">
                        {this.state.feat.map(featured => (
                            <AppBadgeHomePage 
                                name={featured.name}
                                icon={featured.customData.icon}
                                summary={featured.customData.summary}
                            />
                        ))}
                    </div>
            </div>
        )
    }
}

AppBadgeHomePage.js

import React, { Component } from 'react';

export default class AppBadgeHomePage extends React.Component {
    
    render(){
        return (
            <a className="featured-grid-item-badge" href="www.google.com">
                <div className="featured-grid-item">
                    <img className="featured-appIcon" src={this.props.icon} />
                        <div>
                            <p className="featuredTitle">{this.props.name}</p>
                        </div>
                        <div>
                            <p className="badgeSummary">{this.props.summary}</p>
                        </div>
                </div>
            </a>
        )
    }
}

fetch can reject on network errors, so you should include a .catch to handle promise rejections and thrown errors. Also, you need to first check response.ok before further accessing into the response object. See Checking that the fetch was successful. Adding some "sad path" handling may help you find why this.state.feat remains an empty array. — Drew Reese
– Drew Reese, Commented Nov 24, 2020 at 8:31

Napdx · Accepted Answer · 2020-11-24 07:19:18Z

1

Why are you mapping for feat ,feat supposed to be an array

Try this :-

 getFeaturedApps = () => {
    fetch(`http://localhost:3001/apps/featured`)
    .then(response => response.json())
    .then(responseJson => {
        this.setState({
            feat: responseJson
            }))
        })
    })
}

answered Nov 24, 2020 at 7:19

Napdx

1321 gold badge1 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

zamanada Over a year ago

the idea is that all the featured apps are in the feat array. I would pull the data from there. also I made the edits you suggested and still there is no <AppBadgeHomePage> or any of the data inside of there

Napdx Over a year ago

can you check console.log(this.state.feat) if it return anything

zamanada Over a year ago

it returns empty

Napdx Over a year ago

.then(response => console.log(response)) are you getting response the way you expected?

Napdx Over a year ago

.then((response) => response.json()) .then((responseJson) => console.log(responseJson));

|

SSK · Accepted Answer · 2020-11-24 07:31:22Z

First of all, you need to console.log(this.state.feed) under render method to see if the feed array is not blank always.

If its blank then I would suggest you to call the the API in componentDidMount() method.

If its not blank then you would notice that the feed state has the object which you have already set it to your desired key value pair so there is no need to this:

<AppBadgeHomePage 
   name={featured.name}
   icon={featured.customData.icon}
   summary={featured.customData.summary}
/>

rather do this:

<AppBadgeHomePage 
   name={featured.name}
   icon={featured.icon}
   summary={featured.summary}
/>

To sum it up, if the child component is not being rendered than the array must be blank all the way. And if the child component is being rendered and the value is not showing up then the key being called is wrong.

Drew Reese · Accepted Answer · 2020-11-24 08:48:36Z

From the react docs:

constructor

Avoid introducing any side-effects or subscriptions in the constructor. For those use cases, use componentDidMount() instead.

The data fetch should be dispatched from componentDidMount lifecycle method.
Don't mix using the constructor and initializing state in the class body.
getFeaturedApps is an arrow function, so there is no need to bind this to it in the constructor.
You should check for successful fetch in the promise chain. You should also handle promise rejections and other thrown errors from the returned promise chain.
When mapping this.state.feat you incorrectly try to access what was the original nested values, but you flattened the feature element when it was mapped in the fetch response handling.

Code:

class FeaturedGrid extends React.Component {
  state = {
    feat: []
  };

  componentDidMount() {
    this.getFeaturedApps();
  }

  getFeaturedApps = () => {
    fetch(`http://localhost:3001/apps/featured`)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Response not ok');
        }
        return response.json();
      })
      .then((responseJson) => {
        this.setState({
          feat: responseJson.map((item) => ({
            name: item.name,
            icon: item.customData.icon,
            summary: item.customData.summary
          }))
        });
      })
      .catch(console.error);
  };

  render() {
    return (
      <div>
        <h3>Featured Apps</h3>
        <div className="featured">
          {this.state.feat.map((featured) => (
            <AppBadgeHomePage
              name={featured.name}
              icon={featured.icon}
              summary={featured.summary}
            />
          ))}
        </div>
      </div>
    );
  }
}

Collectives™ on Stack Overflow

how to dynamically render reactjs components from json data

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related