Comments (2)
I encountered this too, and solved it by adding a new state property error
that is set when an error is caught in the promise of the API which will be rethrown in the render method of the component (courtesy of some stackoverflow answer)
My component looks like this then
class Details extends React.Component {
// Adding error state
state = { loading: true, error: null };
componentDidMount() {
const { id } = this.props;
pet
.animal(+id)
.then((data) => {
const { animal } = data;
if (animal === undefined) {
// The API returns a data object with error details, without the animal, so catch it like this
return Promise.reject(new Error('Unable to load animal details'));
}
this.setState({...});
return Promise.resolve();
})
.catch((error) => {
// Catching promise errors, setting state
this.setState({ error });
});
}
render() {
const { loading, error } = this.state;
// Check for error and rethrow
if (error) {
throw error;
}
if (loading) {
return <h1>loading ...</h1>;
}
return (
<div className="details">...</div>
);
}
}
from complete-intro-to-react-v5.
I have the same doubt, in my case none of the code mentioned here and in the lecture video I got, not working. Here is the code I've written,...
import React from "react";
import pet from "@frontendmasters/pet";
class Details extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: true,
};
}
componentDidMount() {
pet.animal(this.props.id).then(({ animal }) => {
this.setState({
name: animal.name,
animal: animal.type,
location: ${animal.contact.address.city}, ${animal.contact.address.state}
,
description: animal.description,
media: animal.photos,
breed: animal.breeds.primary,
loading: false,
});
}, console.error);
}
render() {
if (this.state.loading) {
return
loading ...
;}
const { animal, breed, location, description, name } = this.state;
return (
<div className="details">
<div>
<h1>{name}</h1>
<h2>{`${animal}- ${breed}- ${location}`}</h2>
<button>Adopt {name}</button>
<p>{description}</p>
</div>
</div>
);
}
}
export default Details;
this code is not shoing the details of the pet. Plz help me out.
Thank you.
from complete-intro-to-react-v5.
Related Issues (20)
- Breeds data not fetched, error to get the breeds from the @front end masters api HOT 2
- useEffect error: Maximum update depth exceeded HOT 1
- The API is abandonned ? HOT 1
- Mapping not rendering img tag. HOT 6
- Reference to non-existent file "script.js" instead of "App.js"
- Step missing: npm run dev HOT 1
- first example - h1 text not visible due to css HOT 1
- npm install error HOT 1
- Modal, create Portal
- Input components lose focus in custom hooks HOT 2
- Parcel and emotion.js error HOT 2
- NOTE: Parcel bundler Invalid Version HOT 2
- Error when Parcel uses Babel to translate async/await calls HOT 1
- public state objects showing "Parsing error: Unexpected token" in Typescript
- Uncaught Error: seed(S) must take numeric argument; is string
- .prettierrc and .eslintrc.json not working HOT 1
- Uncaught TypeError: (0 , _popmotion.value) is not a function
- Error handling response: TypeError: Cannot read property 'length' of undefined
- HTTP Error after buliding with parcel and deploying to production(Netlify)
- H1 tag missing on homepage
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from complete-intro-to-react-v5.