Social network for pets

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

}
}

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.

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:

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 “=”