Social Network for Pets, Help

I’ve gotten through all the steps within this project, looked at a few things in the forum to help, and checked if i had misspelling, but nothing will make the page appear.
If you could help find the issue and tell me where I went wrong, I’d greatly appreciate your assistance.

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



  render() {
    const isLoading = this.state.userData === null;

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

    let name = isLoading === true ? "Loading..." : this.state.userData.name;

   let bio = isLoading === true ? "Bio Loading..." : this.state.userData.bio;

   let friends = isLoading === true ? [] : this.state.userDate.friends;

  let proPic = isLoading === true ? "Loading Image..." : <img src={this.state.userData.profilePictureUrl} alt="" />;

  }


 componentDidMount() {
    this.loadUserData();
  }

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

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

 



    return (
      <div className={className}>
        <div className="profile-picture">{proPic}</div>
        <div className="profile-body">
          <h2>{name}</h2>
          <h3>@{this.props.username}</h3>
          <p>Bio goes here</p>
          <h3>My friends</h3>
          <Userlist usernames={friends} onChoose={this.props.onChoose} />
        </div>
      </div>
    );
  }

Double check your render() function. Right now it isn’t returning anything at all. Your large block of JSX seems to be on its own at the bottom instead of in your render() function.

Fixing that will give you output and then you can continue working on your project.

1 Like

so i have the same problem and i also checked my render function.
here is my code:

Not really the same issue. The OP wasn’t getting any output at all. Yours is getting output, so we know the render() function is doing something at least. The problem you’re having is that it stays in “loading” mode forever.

We know that it comes out of “loading” mode after loadUserData() successfully retrieves the data. Adding a console.log() in here could be beneficial to make sure the function is called at all. We know the code that is supposed to call loadUserData() is the React’s componentDidMount() Lifecycle method. You could add a log in there if necessary too.

Adding logs to either of those places would reveal that they aren’t being called.

Since componentDidMount() is built into React for their class components, we can focus on that

//        v
  componenetDidMount() {
      this.loadUserData()
    }

It never gets called because there is a typo in its name, so loadUserData() never gets called, and it stays in loading mode

thank you, @selectall

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){
      this.loadUserData()} }
  
  
  render() {
    const isLoading = this.state.userData === null

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

This seems to work for me perfectly , 
I think you really have to pay attention to the isntructions properly 
all though my confusion regarding a few things remain , there needs to be greater emphasis on explaining the components well . 
This is really confusing ■■■■

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.