Social Network for Pets project

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


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 =;
bio =
friends = this.state.userData.friends

1 Like

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);
  componentWillUnmount() {cancelFetch(this.fetchID);}
    constructor(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 =;
      bio =;
      friends = this.state.userData.friends;

    return (
      <div className={className}>
        <div className="profile-picture">{!isLoading && 
        (<img src={this.state.userData.profilePictureUrl} alt="" />
        <div className="profile-body">
          <h3>My friends</h3>
          <Userlist usernames={friends} onChoose={this.props.onChoose} />
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> 
 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.

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!

Awesome thank you this fixed the issue for me! I had this.setstate = {userData: null} where I needed this.setState({userData:null}).