Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Displaying the Data

Posted by Eliza nohioi
.a{fill-rule:evenodd;}techdegree
Eliza nohioi
Full Stack JavaScript Techdegree Student 125 Points

how we can retrieve more details of an item , more than the image url ?

taking the example that we have in this course, how we can retrieve multiple details if the image , for example, the id and the name of an item?

here in gifs we get only the image URL 

const GifList = props => { 

  const results = props.data;
  let gifs;
  if (results.length) {
    gifs = results.map(gif => <Gif url={gif.images.fixed_height.url} key={gif.id} />);    
  } else {
    gifs = <NoGifs />
  }

  return(
    <ul className="gif-list">
      {gifs}
    </ul> 
  );
}

1 Answer

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

In this case, if you want more details or properties of an individual item, you access them via the gif parameter within the map method. gif will be an object, so you probably use the dot notation like gif.images.fixed_height.url and gif.id are, or the square bracket notation if there are other characters in the property name (e.g. gif['hyphen-words']).

e.g. say there was an alt property on each object in the data array and you wanted to use it for an alt prop of the <Gif /> component:

gifs = results.map(gif => <Gif url={gif.images.fixed_height.url} key={gif.id} alt={gif.alt} />);
Eli McChulin
Eli McChulin
Courses Plus Student 76 Points

Regarding this question, I would be interested how I can retrieve from the array on the main component 

  gifs = results.map(gif => <Gif url={gif.images.fixed_height.url} key={gif.id} alt={gif.alt} />);   
                              /* ? ? <Gif name ={gif. ???   } key={gif.id} />);
                                      ? ? <Gif id ={gif. ???   } key={gif.id} />);   
                                   ???? <Gif author ={gif. ???   } key={gif.id} />);       */

in order to have for each item on the front page a structure as 

<div >
<h1 >name  <span> id </span> </h1>
 <img src = ""  alt = "picture" title />
<p>author </p>
</div>

Right now we have only the picture

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Eli McChulin, you would pass whatever data you need via the props on the <Gif /> components. So in my example, you could access the url and alt props to use in the child component. Sometimes you'll see people just pass an entire JavaScript object, and then access the properties of that object from within the component.

I'm not sure if that answers your question?