Social Network for Pets project

In this project,
when I run code, browser does’t show anything.I think , there is a bug.

2 Likes

same problem
when I click on pet’s profile I don’t see anything there except data that I provide (loading…)

Same issue i’m having.

If the page aren’t loading at all you probably have some error in your text, when it happens for me I normally copy paste it into VSC to see if there’s some bad code.

If the page is loading but is stuck on ‘‘Loading…’’ make sure you have curly brackets, it fixed it for me.

loadUserData() {
this.setState( {userData: null} );
this.fetchID = fetchUserData(this.props.username, (userData) => {
this.setState({ userData });
});
}

You might also have a typo on some of these so it never finish loading.
name = this.state.userData.name;
bio = this.state.userData.bio
friends = this.state.userData.friends

Hello all. Here is my solution and it works perfectly for me. Hope it helps
Coding High Fives all around.

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

export class Profile extends React.Component {  
  componentDidMount() {this.loadUserData();}
  componentDidUpdate(prevProps) {
  if (this.props.username !== prevProps.username) {cancelFetch(this.fetchID);
  this.loadUserData()};
  }
  componentWillUnmount() {cancelFetch(this.fetchID);}
    constructor(props) {
    super(props);
    this.state = { userData: null };
  }

    loadUserData() {
    this.setState({ userData: null });
    this.fetchID = fetchUserData(this.props.username, (userData) => {
      this.setState({ userData });
    });
  }
  render() {
    const isLoading = this.state.userData === null;
    let className = 'Profile';
    let name;
    let bio;
    let friends = [];
    if (isLoading) {
      className += ' loading';
      name = 'Loading Name';
      bio = 'Loading Bio';
     
    } else {
      name = this.state.userData.name;
      bio = this.state.userData.bio;
      friends = this.state.userData.friends;
    }

    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>
    );
  }
 }
4 Likes
loadUserData() {
    ...
    this.fetchID = fetchUserData(this.props.username, (userData) => {
      this.setState({ userData });
    });
  }

How is it possible to set a state without specifying the property name?

I think you just forgot to change the 
   <h3>My friends</h3> 
with 
   <h3>{friends}</h3>
 in the return method of the render();

Yeah, I had the same issue, as mentioned here it was a type error. Just move the arrow => just after ( userData). It worked for me.
image

Great catch. Thank You!

{ userData } === { userData : userData }

Can anyone explain where the prevProps argument comes from in this exercise?

I don’t understand why it is called and what it refers to.

Thanks in advance for your help!