Social network for pets

Web Development Full-Stack
1

Hi,

I have been working through the Social Network for Pets as part of the React course, I have worked through it and compared to the video and i appear to be doing everything correctly, how ever the profile do not load. Code is below, if some one could please let me know where im going wrong?!

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();
}

componentWillUnmount() {
cancelFetch(this.fetchID);
}

componentDidUpdate(prevProps) {
if(this.props.username !== prevProps.username){
cancelFetch(this.fetchID);
this.loadUserData();
}

}

render() {
const isLoading = this.state.userData === null ? true : false;
const name = isLoading ? ‘Loading…’ : this.state.userData.name;
const bio = isLoading ? ‘Loading…’ : this.state.userData.bio;
const friends = isLoading ? : this.state.userData.friends;
let className = ‘Profile’;
if (isLoading) {
className += ’ loading’;
}

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

}
}

1 Like
2

Hi,

Can you provide a link to the project? Also, could you edit your original post so that the entire block of code is formatted to look like code? This will help us to assist you better and faster.

3

Hi

link to the project https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-22-react-part-ii/modules/wdcp-22-lifecycle-methods/projects/react-lifecycle-methods-social-network-for-pets

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(); } componentWillUnmount() { cancelFetch(this.fetchID); } componentDidUpdate(prevProps) { if(this.props.username !== prevProps.username){ cancelFetch(this.fetchID); this.loadUserData(); } } render() { const isLoading = this.state.userData === null ? true : false; const name = isLoading ? 'Loading...' : this.state.userData.name; const bio = isLoading ? 'Loading...' : this.state.userData.bio; const friends = isLoading ? [] : this.state.userData.friends; let className = 'Profile'; if (isLoading) { className += ' loading'; } return ( <div className={className}> <div className="profile-picture"> { isLoading === false && <img src={this.state.userData.profilePictureUrl} alt="" /> } </div> <div className="profile-body"> <h2>{name}</h2> <h3>@{this.props.username}</h3> <p>{bio}</p> <h3>{friends}</h3> <Userlist usernames={[]} onChoose={this.props.onChoose} /> </div> </div> ); } }

hopefully thats better :slight_smile:

1 Like
4

Hi, I also just finished this project. I found that a problem occurred during fetching.so I checked in loadUserDate()and found setState looks doesn’t work because of syntax I guess. in loadUserData() , setState doesn’t need “=”

6

Hello,

Same here. I did this project three times and one following the video very closely. The loading does not seem to work.

What am I missing? Here is my code when it loads forever:

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 ? "Bio goes here" : this.state.userData.bio;

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

    return (
      <div className={className}>
        <div className="profile-picture"></div>
        <div className="profile-body">
          <h2>{name}</h2>
          <h3>@{this.props.username}</h3>
          <p>{bio}</p>
          <h3>My friends</h3>
          <Userlist usernames={[]} onChoose={this.props.onChoose} />
        </div>
      </div>
    );
  }
}
7

I found the error. I had an extra equal sign:

Here is the code that works:

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