React - consume array react axios

Question

I'm trying to consume a json, using the axes with react, but I can not get the url of the image, the rest as id and title, with it. But images and users, I can not

Hello, I'm trying to consume a json, using the axios with react, but I can not get the url of the image, the rest as id and title, with it. But images and users, I can not

My code:

import React from 'react'


export default props =>{

    const renderRows = () =>{
    const list = props.list || []

    return list.map(shots =>(
        <div key={shots.id}>
            <p>{shots.title}</p>
           <p>{shots.views_count}</p>
            <p>{shots.description}</p>
            {/* <img src="{shots.images.normal}" alt=""/> */}
        </div>
       
    ))
    }

    return(
        <div>
        {renderRows()}
        </div>
            
    )

}

Json:

[
  {
    "id" : 471756,
    "title" : "Sasquatch",
    "description" : "<p>Quick, messy, five minute sketch of something that might become a fictional something.</p>",
    "width" : 400,
    "height" : 300,
    "images" : {
      "hidpi" : null,
      "normal" : "https://d13yacurqjgara.cloudfront.net/users/1/screenshots/471756/sasquatch.png",
      "teaser" : "https://d13yacurqjgara.cloudfront.net/users/1/screenshots/471756/sasquatch_teaser.png"
    },
    "views_count" : 4372,
    "likes_count" : 149,
    "comments_count" : 27,
    "attachments_count" : 0,
    "rebounds_count" : 2,
    "buckets_count" : 8,
    "created_at" : "2012-03-15T01:52:33Z",
    "updated_at" : "2012-03-15T02:12:57Z",
    "html_url" : "https://dribbble.com/shots/471756-Sasquatch",
    "attachments_url" : "https://api.dribbble.com/v1/shots/471756/attachments",
    "buckets_url" : "https://api.dribbble.com/v1/shots/471756/buckets",
    "comments_url" : "https://api.dribbble.com/v1/shots/471756/comments",
    "likes_url" : "https://api.dribbble.com/v1/shots/471756/likes",
    "projects_url" : "https://api.dribbble.com/v1/shots/471756/projects",
    "rebounds_url" : "https://api.dribbble.com/v1/shots/471756/rebounds",
    "animated" : false,
    "tags" : [
      "fiction",
      "sasquatch",
      "sketch",
      "wip"
    ],
    "user" : {
      "id" : 1,
      "name" : "Dan Cederholm",
      "username" : "simplebits",
      "html_url" : "https://dribbble.com/simplebits",
      "avatar_url" : "https://d13yacurqjgara.cloudfront.net/users/1/avatars/normal/dc.jpg?1371679243",
      "bio" : "Co-founder &amp; designer of <a href=\"https://dribbble.com/dribbble\">@Dribbble</a>. Principal of SimpleBits. Aspiring clawhammer banjoist.",
      "location" : "Salem, MA",
      "links" : {
        "web" : "http://simplebits.com",
        "twitter" : "https://twitter.com/simplebits"
      },
      "buckets_count" : 10,
      "comments_received_count" : 3395,
      "followers_count" : 29262,
      "followings_count" : 1728,
      "likes_count" : 34954,
      "likes_received_count" : 27568,
      "projects_count" : 8,
      "rebounds_received_count" : 504,
      "shots_count" : 214,
      "teams_count" : 1,
      "can_upload_shot" : true,
      "type" : "Player",
      "pro" : true,
      "buckets_url" : "https://dribbble.com/v1/users/1/buckets",
      "followers_url" : "https://dribbble.com/v1/users/1/followers",
      "following_url" : "https://dribbble.com/v1/users/1/following",
      "likes_url" : "https://dribbble.com/v1/users/1/likes",
      "shots_url" : "https://dribbble.com/v1/users/1/shots",
      "teams_url" : "https://dribbble.com/v1/users/1/teams",
      "created_at" : "2009-07-08T02:51:22Z",
      "updated_at" : "2014-02-22T17:10:33Z"
    },
    "team" : {
      "id" : 39,
      "name" : "Dribbble",
      "username" : "dribbble",
      "html_url" : "https://dribbble.com/dribbble",
      "avatar_url" : "https://d13yacurqjgara.cloudfront.net/users/39/avatars/normal/apple-flat-precomposed.png?1388527574",
      "bio" : "Show and tell for designers. This is Dribbble on Dribbble.",
      "location" : "Salem, MA",
      "links" : {
        "web" : "http://dribbble.com",
        "twitter" : "https://twitter.com/dribbble"
      },
      "buckets_count" : 1,
      "comments_received_count" : 2037,
      "followers_count" : 25011,
      "followings_count" : 6120,
      "likes_count" : 44,
      "likes_received_count" : 15811,
      "members_count" : 7,
      "projects_count" : 4,
      "rebounds_received_count" : 416,
      "shots_count" : 91,
      "can_upload_shot" : true,
      "type" : "Team",
      "pro" : false,
      "buckets_url" : "https://dribbble.com/v1/users/39/buckets",
      "followers_url" : "https://dribbble.com/v1/users/39/followers",
      "following_url" : "https://dribbble.com/v1/users/39/following",
      "likes_url" : "https://dribbble.com/v1/users/39/likes",
      "members_url" : "https://dribbble.com/v1/teams/39/members",
      "shots_url" : "https://dribbble.com/v1/users/39/shots",
      "team_shots_url" : "https://dribbble.com/v1/users/39/teams",
      "created_at" : "2009-08-18T18:34:31Z",
      "updated_at" : "2014-02-14T22:32:11Z"
    }
  }
]

why is <img> inside {} and commented out? can you not see how different that line is to the others? — Jaromanda X
– Jaromanda X, Commented Oct 6, 2017 at 23:09
so, the code you posted isn't the code you have an issue with? — Jaromanda X
– Jaromanda X, Commented Oct 6, 2017 at 23:11

J Livengood · Accepted Answer · 2017-10-06 23:26:13Z

1

<img src={shots.images.normal} alt=""/>

You do not need the quotes on the image src property.

I would also simplify the map to somethings similar:

export default myComponent = ({ list }) => {

  const listItems = list.map(shots => (
    <div key={shots.id}>
       <p>{shots.title}</p>
       <p>{shots.views_count}</p>
       <p>{shots.description}</p>
       <img src={shots.images.normal} />
    </div>
  );

  return (
    <div>
      {listItems}
    </div>
  );
}

Used like <myComponent list={list} /> like your component does currently.

EDIT:

Your data source may not have a strong schema and may not have an image for every entry. So in that case try replacing part with this:

return list.map(shots => {
  var imageSrc = (shots.images) ? shots.images.normal : null;
  return (
    <div key={shots.id}>
        <p>{shots.title}</p>
        <p>{shots.views_count}</p>
        <p>{shots.description}</p>
        <img src={imageSrc} alt="" />
    </div>
  )
})

edited Oct 6, 2017 at 23:26

answered Oct 6, 2017 at 23:11

J Livengood

2,7261 gold badge15 silver badges27 bronze badges

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

4 Comments

Marco Aurélio Over a year ago

I already changed and it did not work. Show error: Uncaught (in promise) TypeError: Cannot read property 'normal' of undefined at app.js:31757 at Array.map (<anonymous>) at renderRows (app.js:31738) at exports.default (app.js:31765) at StatelessComponent.render (app.js:23797) at app.js:24548 at measureLifeCyclePerf (app.js:23828) at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (app.js:24547) at ReactCompositeComponentWrapper._renderValidatedComponent

J Livengood Over a year ago

We need to see your changed code with <img src={shots.images.normal} alt=""/> then

Jaromanda X Over a year ago

perhaps list passed to myComponent isn't what you say it is

Marco Aurélio Over a year ago

it does not display anything on the screen now :/. I think I have to do a for or something like this to get an image URL of the api

Collectives™ on Stack Overflow

React - consume array react axios

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related