PetBook React.js

I am on petcock project and I am unable to load the data.
I think I have done sth wrong during fetch but I am unable to figure out.

my profile.js file

import { fetchUserData, cancelFetch } from ‘./dataFetcher’;
import { Userlist } from ‘./Userlist’;

export class Profile extends React.Component {
constructor(props){
super(props)
this.state={
userData: null
}
}
loadUserData(){
const isLoading = this.state.userData === null;
if (isLoading) {
this.setState({
userData:null
})
}else{
this.fetchID = fetchUserData(this.props.username, (userData) => {
this.setState({ userData });
});
}
}

render() {
const isLoading =this.state.userData === null;
let name,bio,friends;

let className = 'Profile';
if (isLoading) {
  className += ' loading';
  name='Loading....'
  bio='loading....'
  friends=[];
}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="" />

)}


{name}


@{this.props.username}


{bio}


My friends





);
}
componentDidMount(){
this.loadUserData();
}
}

Plz help me

Hello! I finally managed to get through the Pet Social Network Project. I can’t be sure but maybe your data isn’t loading because you declared the variable isLoading with a const rather than a let? I will copy my code here so that you can compare and hopefully that helps:

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 });
});
}
render() {
let name;
let bio;
let friends;
let isLoading = this.state.userData === null
let className = ‘Profile’;
if (isLoading) {
className += ’ loading’;
name = “Loading Data”;
bio = “Loading Bio”;
friends = ;
}
else {
name = this.state.userData.name;
bio = this.state.userData.bio;
friends = this.state.userData.friends;
}
return (



{!isLoading && (

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

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

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

1 Like

thanks bro it means a lot

Hi,

I’m on step 8, but when I open a pet profile it seems to remain on the ‘isLoading’ state. All of my inputed strings appear on the new windows but never display the data. Can you review my code to see why this might be? Thanks!

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

  render() {
    let isLoading = (this.state.userData === null);
    let className = 'Profile';
    let name;
    let bio;
    let friends;

    if (isLoading) {
      className += ' loading';
      name = 'Loading name...';
      bio = 'Loading bio';
      friends = [];
    } else {
      name = this.state.userData.name;
      bio = this.state.userData.bio;
      friends = this.state.userData.friends;
    }

    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={friends} onChoose={this.props.onChoose} />
        </div>
      </div>
    );
  }
    componentDidMount() {
    this.loadUserData()
  }
}

gregcooper90
Here is my code it worked perfectly for me. Hope this helps you.

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

Khanusman786
Here is my code it worked perfectly for me. I hope this helps you.
Academic High Five!

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

The variable set to const was my problem. just reading down to your post solved my headache! Thanks.

Oh this was nice to see! I’m so glad it helped! Happy Coding!!!