Social Network for Pets

Lifecycle Methods | Codecademy
hi,
the task 8, i’m trying this :

<div className="profile-picture">
    <img src={this.state.userData.profilePictureUrl}/>
</div>

the hint is:

<div className="profile-picture">
  {!isLoading && (
    <img src={this.state.userData.profilePictureUrl} alt="" />
  )}
</div>

but it didn’t work, after using this code the @dog @cat can’t be clicked, could anybody tell me why ?Thanks!

Hi,
from this snippet we cannot tell what’s wrong. You need to provide your full code as this snippet is not the cause of the error.

thanks, this is the topic’s url.

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

and this is 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();
  }

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

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


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

Please format your code properly: How to format code

Which element do you want to be clickable? I don’t see an onClick event handler anywhere. Anything from the Userlist component?

i think the render component is in the ‘app.js’.
image
could u please visit the url i pasted? it’s a project which has all files, thank you.

I don’t have access to the the PRO content at the moment. And the problem is in your code, not theirs. If I could access the content, I could only see what CC provided or what I coded.
So if you want me to help you anyway, you need to tell me which should be your clickable element and where your click event is. The App component renders the project, but it most likely does not have the click event I asked for.
And format your code, please.

hi, this is the code of app.js,

import React from 'react';
import ReactDOM from 'react-dom';
import { Profile } from './Profile';
import { Directory } from './Directory';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentUsername: null,
    };
    this.handleChoose = this.handleChoose.bind(this);
    this.handleReturnToDirectoryClick = this.handleReturnToDirectoryClick.bind(
      this
    );
  }

  handleChoose(newUsername) {
    this.setState({ currentUsername: newUsername });
  }

  handleReturnToDirectoryClick() {
    this.setState({ currentUsername: null });
  }

  render() {
    let body;
    if (this.state.currentUsername) {
      body = (
        <Profile
          username={this.state.currentUsername}
          onChoose={this.handleChoose}
        />
      );
    } else {
      body = <Directory onChoose={this.handleChoose} />;
    }

    return (
      <div className="App">
        <header>
          <h1>PetBook</h1>

          <nav>
            {this.state.currentUsername && (
              <button onClick={this.handleReturnToDirectoryClick}>
                Return to directory
              </button>
            )}
          </nav>
        </header>

        <main>{body}</main>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

and this is the code of Directory.js

import React from 'react';
import { Userlist } from './Userlist';

export function Directory(props) {
  return (
    <div className="Directory">
      <h2>User directory</h2>
      <Userlist
        usernames={['dog', 'cat', 'komodo']}
        onChoose={props.onChoose}
      />
    </div>
  );
}

You said that you want the rendered animal names to react on a click event. But I don’t see a click event for that. The App component just has a button with a click event for returning to the directory.
So where is the click event handler for the animals you want to be clickable?
I assume that’s in the component Userlist that you haven’t posted yet.

sorry for replying so late.i just spend a weekend.
this is the userlist.js

import React from 'react';

export class Userlist extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    this.props.onChoose(event.target.dataset.username);
  }

  render() {
    return (
      <ul>
        {this.props.usernames.map((username) => (
          <li key={username}>
            <button data-username={username} onClick={this.handleClick}>
              @{username}
            </button>
          </li>
        ))}
      </ul>
    );
  }
}

Ok. So to find the error, you need to add a few consoles to see where the error is.
First, let’s see if the data loads correctly and sets the state no loading = false.

  • If you open your browser’s console, check your <div class="Profile"> Does it have the class ‘loading’ also?
  • If it doesn’t: Add a console.log(this.state) to the top of the render method of the component that returns the component. What does it log?
1 Like

i think i should review the course once again, totally confused,
anyway,thank u so much for replying my questions,thank u.

1 Like

Just saw that the editor swallowed a part of my answer.
Anyway: I assume that the data you get back is not properly saved to the state. But I could only say for sure if I knew the data structure.
Good luck with the exercise!