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

General Discussion Displaying the Search Results

Posted by Dang Long Long
Dang Long Long
1,077 Points

How I can display the name of gifs under the main header after I searched

How I can display the name of gifs under the main header after I searched

1 Answer

Henry Blandon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Henry Blandon
Full Stack JavaScript Techdegree Graduate 21,521 Points
Henry Blandon
.a{fill-rule:evenodd;}techdegree seal-36
Henry Blandon
Full Stack JavaScript Techdegree Graduate 21,521 Points

To get the title of the gifs, you pass a prop in the GifsList.js in the map function just after the ''key". like this: title={gif.title} then in the Gif.js you can try {console.log(props.title)} just below the img tag, like the code below.

const Gif = props => (
  <li className="gif-wrap">
    <img src={props.url} alt=""/>
    {console.log(props.title)}
  </li>

if you run the app you will see all the titles in the console. good luck trying to make them display in the page. You will have to play with css most likely.