Photos not displaying in component

Question

Here is App.js

import React, {Component} from 'react';
import {
  BrowserRouter,
  Route,
  Switch,
  Redirect
} from 'react-router-dom';
import Search from './Search';
import Nav from './Nav';
import '../index.css';
import axios from 'axios';
import apiKey from './Config';
import NotFound from './NotFound';
import PhotoList from './PhotoList';


class App extends Component {

  state= {
    pictures: []
  }

  componentDidMount() {
    this.getImages()
  }


  getImages=(query='cats')=> {
    axios.get(`https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=${apiKey}&tags=${query}&per_page=24&page=1&format=json&nojsoncallback=1`)
      .then(res=> {
        const pictures=res.data.photos.photo
        this.setState({pictures});
      }).catch((error)=> {
        console.log("There was an error parsing your data", error);
      })
  }

  render() {
    console.log(this.state.pictures);
    return (
      <div className="container">
        <Search />
        <Nav getImages={this.getImages}  />
        <Switch>
          <Route exact path="/" render={()=> <Redirect to={'/cats'} />} />
          <Route path='/cats' render={()=> <PhotoList getImages={()=>this.getImages} query='cats' data={this.state.pictures}/>} />
          <Route path='/dogs' render={()=> <PhotoList getImages={()=>this.getImages} query='dogs' data={this.state.pictures} />} />
          <Route path='/computers' render={()=> <PhotoList getImages={()=>this.getImages} query='computers' data={this.state.pictures} />} />
          <Route component={NotFound}/>
        </Switch>
      </div>
    )
  }
}

export default App;

Here is PhotoList.js

import React, {Component} from 'react';
import Photo from './Photo';

class PhotoList extends Component {

  handleImages=()=> {
    this.props.getImages(this.props.query);
  }

  componentDidMount() {
    this.handleImages();
  }


  render() {
    const data=this.props.data 
    console.log(this.props.query)
    return (
      <div className="photo-container">
        <h2>Results</h2>
        <ul>
          {data.map((photo,index)=> 
            <Photo 
              farm={photo.farm}
              server={photo.server} 
              id={photo.id}
              secret={photo.secret}
              key={index}
            />
          )}
        </ul>
      </div>
    );
  }
}


export default PhotoList;

I've passed the getImages function into PhotoList that fetches data and changes the main App's state. The function takes a query string (cats, dogs, or computers). Then the state data is passed down as props and mapped over in the PhotoList component.

My website still only displays cats, even when I type in a different path (ex /dogs, /computers), yet when I console log the query string, I'm clearly entering different values into it. So why am I still getting cats shown? I know by default the query is equal to cats, but when I call the function in PhotoList it should be set to a different value with the query prop.

What am I doing wrong?

Answer 1

In your codes this.handleImages is called only once because componentDidMount is only called when the component firstly initialized by props.

To get various types of images, you need to call when the prop is changed.

Then you can use componentDidUpdate function to do that.

   componentDidMount() {
     this.handleImages();
   }

   componentDidUpdate(prevProps) {
     if (prevProps.query !== this.props.query) {
       this.handleImages();
     }
   }