Access wanted data in API?

Question

*apologies as I have posted a similar question earlier but deleted it as this is a better-structured question.

Hello! I want to target largeImageURL from the PixaBay API to render within the GridTile in my PhotoResults container. I've configured Redux into the application. When I console log this.props.photos after submitting a searchText, I receive an array with the length of 20. I know that 0: in 0: Array(20) means the first index position, but I don't know how that helps me to target largeImageURL. How do I target largeImageURL to render within the GridTile? Many thanks!

REDUCER

import * as actionTypes from '../actions/actions_index';

const photos = (state = [], action) => {
  switch(action.type) {
    case actionTypes.FETCH_PHOTOS:
      console.log('Action received', action);
      return [ action.payload.data.hits ];
    default:
      return state;
  }
}

export default photos;

PHOTO RESULTS CONTAINER

import React, { Component } from 'react';
import {GridList, GridTile } from 'material-ui/GridList';
import { connect } from 'react-redux';

class PhotoResults extends Component {
  render() {
    let photoList;
    if (this.props.photos) {
      photoList = (
        <GridList cols={3}>
          {this.props.photos.map(photo => (
            <GridTile title={photo.tags} key={photo.id}>
            <img src={photo.largeImageURL} alt="" />
            </GridTile>
          ))}
        </GridList>
      )
    } else {
      photoList = null;
    }
    console.log(this.props.photos);
    return (
      <div>
        {photoList}
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return { photos: state.photos };
}

export default connect(mapStateToProps, null)(PhotoResults);

Hello @Think-Twice. My current code in the Photo Results container is not rendering largeImageURL inside of GridTile. I'm not targeting it correctly. How do I get largeImageURL to render? — , Oct 10 '18 at 02:32

Hemadri Dasari · Accepted Answer · 2018-10-10T06:19:19.643

Try this. Initially this.props.photos will be undefined so you need to do conditional check before doing .map

  return(){
      return(
           <div>
              <GridList cols={3}>
                  {this.props.photos && Array.isArray(this.props.photos[0]) && this.props.photos[0].length > 0 && this.props.photos[0].map(photo => (
                     <GridTile title={photo.tags} key={photo.id}>
                         <img src={photo.largeImageURL} alt="" />
                    </GridTile>
                   ))}
    </GridList>
          </div>
      )
  }

This will also work but I don’t recommend if else in render

    render() {
       let photoList;
       if (this.props.photos && Array.isArray(this.props.photos[0]) && this.props.photos[0].length > 0)
           photoList = (
               <GridList cols={3}>
                    {this.props.photos[0].map(photo => (
                       <GridTile title={photo.tags} key={photo.id}>
                         <img src={photo.largeImageURL} alt="" />
                       </GridTile>
                    ))}
               </GridList>
              )
             } else {
             photoList = null;
            }
            console.log(this.props.photos);
           return (
           <div>
              {photoList}
           </div>
          );
        }

Thank you for the suggestion. Initially, I'm receiving this.props.photos as an empty array actually. I attempted your suggestion, but I still do not get largeImageURL to render after I submit the searchText. I hope I'm explaining the issue correctly. Here is my GitHub. Really appreciate your help! https://github.com/KenAustria/PixaBay_Redux — , Oct 10 '18 at 03:04
There isn't an error in the browser. Kindly check out the screenshot that I had posted above, as that's what I'm receiving when I attempt with my code and your code as well. — , Oct 10 '18 at 03:32
Sorry, I get an error 'Cannot read property 'map' of undefined' — , Oct 10 '18 at 06:12
@Ken I suspect you have an array inside another array. Can you try again with my updated code — Hemadri Dasari, Oct 10 '18 at 06:20

Access wanted data in API?

1 Answers1