javascript - 'pic' is not defline with React

Question

I'm working on a school project which is about created a website displaying a photo gallery with the Flickr API ( Photo.search in this case) I'm struggling with errors who said that "pic is not define". I don′t know what to do in this case. I will be glad to receive any help in order to unlock me. Thanks in advance !

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




class App extends Component {
  constructor(){
    super();
    this.state = {
      pictures: [],
      page: 1,
      total_pages: -1 
      
    };
  }

  renderPhotos(){
    
    console.log(
      this.state.pictures
    )

     return(
    
      <div>

    this.state.pictures.map((pic) => {
        
    <img className="img-thumbnail m-2" src={'https://farm'+pic.farm+'.staticflickr.com/'+pic.server+'/'+pic.id+'_'+pic.secret+'_w.jpg'} alt="bike" />
      
    })

    </div>

    )
  }

  componentDidMount(){
    alert(process.env.REACT_APP_API_KEY);
    fetch('  https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key={APIKEY}_id=&tags=bikerace%2Cboulderbiketour&per_page=42&page=1&format=json&nojsoncallback=1')
    .then(function(response){
      return response.json();
    })
    .then(function(j){

      alert(JSON.stringify(j));
      if (this.state.total_pages == -1){
        this.setState({total_pages: j.photos.pages,pictures: j.photos.photo})
      }
      else{ 
        this.setState({pictures: j.photos.photo})
      }

      
     
    })
  }

  NextPage = () => {
   var CurrentPage = this.state.page;
   CurrentPage++;
   if (CurrentPage <= this.state.total_pages){
    this.setState({page:CurrentPage});
   }
   

  }

 
  PreviousPage = () => {
    var CurrentPage = this.state.page;
    CurrentPage--; 
    if (CurrentPage >= 1){
      this.setState({page:CurrentPage});
     }

    
 
   }
 

  render() {
    return (
      <div className="App">
        <header className="App-header">
        
          <h1 className="App-title">Welcome to React</h1>
          
        </header>
         
        <p>
          <div>
           Page {this.state.page}
          </div>
          
            <div className="gallery p-5">
          
          {this.renderPhotos()}

          </div>

          <div>

          <button onClick={this.PreviousPage}>Previous</button>
          <button onClick={this.NextPage}>Next</button>
          </div>
          

        </p>

        
      </div>
    );
  }
}

export default App;

Answer 1

There's honestly not a whole lot of info to go by here, but just by peaking at the code I see something I've often run into. React is funny when rendering items because it will render, then update state, and then render again. This mixed with the fact that React will just crash if anything is undefined means it will crash at the first render before it ever gets to the second render. You'll see this in your console logs if you try to log it out. There are often multiple renders in a react component and if anything is undefined in any of the renders. React will just crash.

in your case React is checking map before this.state.pictures is defined and therefore it crashes before it gets to the second render. Here's how you fix this.

1. Console.log(this.state)
2. If that works then console.log(this.state.pictures)
3. keep going down the line until it crashes.
4. at the point that is crashes make a mental note. Lets say it crashes at "this.state.pictures". You'll want to write the following code below then

this.state && this.state.pictures.map(pic)

It would take a whole textbook to explain why this works, but it does.