Hello,
I was working on the React project called “Social Network for Pets” and it did not behave correctly, even though (I think) I did every step correctly (I checked the hints and the walkthrough video). Nevertheless, when I click on a pet (dog, cat…), it did not go to the pet’s profile. Instead, all I got is an extra “return to directory” link at the top right.
I completed the project up until step 8 but could not see the results of my work because of this glitch.
Can anyone tell me what I can do to fix this? Did I make an error or is there some trouble in the other files?
Thank you,
Sandy
My code:
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 ? "Loading bio..." : this.state.userData.bio;
const friends = isLoading ? [] : this.state.userData.friends;
if (isLoading) {
className += " loading";
}
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>
);
}
}