title: Need help on making a nav bar show images from api
body: <p>I am new to react and I am trying to build a gallery website that displays pictures based on what button the user clicks, the pictures are being fetched from the flickr api, the website looks like this</p>
  
  <p><a href="https://i.stack.imgur.com/oNh7Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oNh7Y.png" alt="Nav bar"></a> </p>
  
  <p>my App component is the main component making the request to flickr using this function, this works as I am able to search for pictures on the search input </p>
  
  <pre><code>//this function will create the search feature
     performSearch = (query = "sunset") =&gt; {
       //include a query parameter so that flickr can return images based on user input, and provide a default value for query parameter to display sunset pics when the page first loads
       //fetch data from flickr
       axios 
         .get(
           `https://api.flickr.com/services/rest/?method=flickr.photos.search&amp;api_key=${apiKey}&amp;tags=${query}&amp;per_page=24&amp;format=json&amp;nojsoncallback=1`
         )
         .then(response =&gt; { //set the response so that pics will be equal to the data array containing photos from flickr
          console.log(response)
           this.setState({
             pics: response.data.photos.photo, 
             loading: false //initialize a loading state to display a loading message
           });
         })
         .catch(error =&gt; { //this catch method outputs a message to the console, should axios fail to retrieve data
           console.log("Something went wrong, could not access data", error);
         });
     }; 
  </code></pre>
  
  <p>however, my goal is to render images from the <strong>Cats</strong>, <strong>Dogs</strong> and <strong>Computer</strong> components and show images based on the button clicked, but I am not really sure how to go about that, this is my Cats component</p>
  
  <pre><code>import React from "react";
  
  const Cats = () =&gt; (
    &lt;div&gt;
      &lt;h2&gt;I want to render cat images as soon as a user click the cats button&lt;/h2&gt; {/*pass string as prop from app line 29*/}
      &lt;p&gt;Is it true that cats have 9 lives?&lt;/p&gt;
    &lt;/div&gt;
  );
  
  export default Cats;
  </code></pre>
  
  <p>I thought I should mention that my 3 topics are inside a Components folder and my app.js is located outside like this </p>
  
  <p><a href="https://i.stack.imgur.com/4sEbT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4sEbT.png" alt="My folder structure"></a></p>
  
  <p>Any helpful tips will be appreciated, this is my repo for reference <a href="https://github.com/SpaceXar20/react_gallery_app_updated" rel="nofollow noreferrer">https://github.com/SpaceXar20/react_gallery_app_updated</a></p>