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