React-lifecycle-methods-social-network-for-pets

Hello,
I was working on the React project called “Social Network for Pets” and it did not behave correctly, even though (I think) I did every step correctly (I checked the hints and the walkthrough video). Nevertheless, when I click on a pet (dog, cat…), it did not go to the pet’s profile. Instead, all I got is an extra “return to directory” link at the top right.
I completed the project up until step 8 but could not see the results of my work because of this glitch.
Can anyone tell me what I can do to fix this? Did I make an error or is there some trouble in the other files?
Thank you,
Sandy

link to project

My code:

import React from "react";
import { fetchUserData, cancelFetch } from "./dataFetcher";
import { Userlist } from "./Userlist";

export class Profile extends React.Component {
  constructor(props) {
    super(props);
    this.state = { userData: null };
  }
  loadUserData() {
    this.setState({ userData: null });
    this.fetchID = fetchUserData(this.props.username, (userData) => {
      this.setState({ userData });
    });
  }
  componentDidMount() {
    this.loadUserData();
  }
  render() {
    const isLoading = this.state.userData === null ? true : false;
    const name = isLoading ? "Loading..." : this.state.userData.name;
    const bio = isLoading ? "Loading bio..." : this.state.userData.bio;
    const friends = isLoading ? [] : this.state.userData.friends;

    if (isLoading) {
      className += " loading";
    }

    return (
      <div className={className}>
        <div className="profile-picture">{!isLoading && (
          <img src={this.state.userData.profilePictureUrl} alt="" />
          )}
          </div>
        <div className="profile-body">
          <h2>{name}</h2>
          <h3>@{this.props.username}</h3>
          <p>{bio}</p>
          <h3>My friends</h3>
          <Userlist usernames={friends} onChoose={this.props.onChoose} />
        </div>
      </div>
    );
  }
}

Your error starts in the below snippet. You are assigning a value to a variable that hasn’t been created.

If you add a variable declaration for the class name prior to the if statement you should be good to go.

 let className;
   if (isLoading) {
     className += " loading";
   }

This was the error logged into the console that points to the issue:
image

Keep up the good work! These types of bugs can be frustrating at first.

Thank you, 1moregame! That totally did the trick!
Thank you also for sharing with me how you found the error. I now realize that I can use the “inspect” function and check for errors in the console myself, even in these projects. That’s empowering!
I appreciate your help.
Sandy

Any time! The console is great, but can be confusing sometimes when you aren’t sure what to look for. Use console.log to help find errors too by seeing when the code breaks. Good luck!