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 trialEliza nohioi
Full Stack JavaScript Techdegree Student 125 Pointshow 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
Treehouse Moderator 32,305 PointsIn 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
Courses Plus Student 76 PointsEli McChulin
Courses Plus Student 76 PointsRegarding this question, I would be interested how I can retrieve from the array on the main component
in order to have for each item on the front page a structure as
Right now we have only the picture
Iain Simmons
Treehouse Moderator 32,305 PointsIain Simmons
Treehouse Moderator 32,305 PointsEli McChulin, you would pass whatever data you need via the props on the
<Gif />
components. So in my example, you could access theurl
andalt
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?