Social Network for Pets project

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

1 Like

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>
    );
  }
 }
2 Likes