Https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-react-part-ii/modules/fecp-lifecycle-methods/projects/react-lifecycle-methods-social-network-for-pets

why we do the update lifecycle just for the profile file.
`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 });
})
}
componentDidUpdate(prevProps) {
if(this.props.username !== prevProps.username) {
cancelFetch(this.fetchID);
this.loadUserData();

}

}
componentDidMount() {
this.loadUserData();
}
componentWillUnmount(){
cancelFetch(this.fetchID)
}
render() {
let name;
let bio;
let friends;
let isLoading = true;
if(this.state.userData === null) {
isLoading = true;
}else {
isLoading = false;
}
if(isLoading) {
name = “Loading…”
bio = “that’s not found”;
friends = ;
} else {
name = this.state.userData.name;
bio = this.state.userData.bio;
friends = this.state.userData.friends;
}

let className = 'Profile';
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>
);

}
}`

https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-react-part-ii/modules/fecp-lifecycle-methods/projects/react-lifecycle-methods-social-network-for-pets

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