Using basic API in react

I am learning React and working on a sample project. It runs very slow on mobile browsers, images take too much time to download even though I am passing low resolution versions in API call. Anyone has any feedback on how to make those images download quickly in mobile? What are the best ways to handle props being passed to Child component? Github: https://wwestars.netlify.app | https://github.com/tpkahlon/javascript/tree/master/wwesuperstars.

Hi, seems to that the images are getting

 Status Code: 429

The HTTP 429 Too Many Requests response status code indicates the user has sent too many requests in a given amount of time (“rate limiting”).

Why don’t you get the collection of images in your root repository and load them from there instead of having over 100 get request from that api?

I am not familiar with api giphy.com but could you load a collection in one request ? And having a promise to wait for the response ? When promise fulfils you can set state with the whole collection of images and then return in the Card?

Adding props to render method is useless in Card component.

@tpkahlon As @GeorgeCrisan suggests, you are probably hitting a rate limit. According to their FAQ, it states:

We allow all newly created keys to have a maximum of 42 search requests an hour, 1000 search requests a day and 10 upload requests a day. Need to make more requests? Need support on our side to help you launch your app into production?

On the positive side, I like the way you wrote the components, clean es6, modular. Good job. One thing to be aware:

<div className='card__thumbnail'><img src={this.state.image} alt={this.props.name}></img></div> 

When you return state like this you want to be sure that you got that state. I see that you initiate your state as null, what if the first render fails(in your case it fails and you have no catch to handle that rejection ) and you never get an image? Do you want that div rendered?

If no is good to check against the state before the render method returns.

Could be this.state.image not null ? the div if not null : or something else instead or maybe null

@tpkahlon In addition to @GeorgeCrisan’s suggestion above, I would not use that forEach, because you would be iterating through Data.wrestlers twice during the render. Instead, I would create a helper function to perform the rename and call it in the map of the return statement.

class MainContent extends React.Component {
  render() {
    const rename = name => 'wwe+' + name
      .toLowerCase()
      .replace(/ /g, '+')
      .replace(/('|-)/g, '');

    return (
      <main className='main'>
        {Data.wrestlers.map(({ name }) => (
          <Card key={name} name={name} src={rename(name)} alt={name} />
        ))}
      </main>
    );
  }
}