search

btholt / complete-intro-to-react-v4

The Complete Intro to React, as given for Frontend Masters
https://frontendmasters.com/learn/react/
1.14k stars 248 forks source link

Carousel - Photos not showing. #26

Closed throwpigeyaway closed 5 years ago

throwpigeyaway commented 5 years ago

TypeError: Cannot read property 'value' of undefined

27 | <img src={photos[active].value} alt="primary animal" />

`class Carousel extends React.Component { state = { photos: [], active: 0 }; static getDerivedStateFromProps({ media }) { let photos = []; if (media && media.photos && media.photos.photo) { photos = media.photos.photo.filter(photo => photo["@size"] === "pn"); }

return { photos };

} handleIndexClick = event => { this.setState({ active: +event.target.dataset.index }); };`

Photos and active are defined already from what i know.

(anonymous function) src/Details.js:30

30 | this.setState({

The details page works fine before the Carousel import. I copied the git file for Carousel, and it still doesn't work.

throwpigeyaway commented 5 years ago

https://imgur.com/a/B7A8ePk screen shot

ghost commented 5 years ago

I might be wrong, but I think you need to remove:

let hero = photos[active].value

from the render method in Carousel.js

Instead, use diffcheck and make sure your Pet.js file matches what bholt has. I think you might be including code from the Pet.js file in your Carousel.js

1Marc commented 5 years ago

You'll have to refer to the final code from this step: https://btholt.github.io/complete-intro-to-react-v4/async-and-events-in-react

Final code for the Carousel: https://github.com/btholt/complete-intro-to-react-v4/commit/89678fe3f663be06f80e93370942592c03f3f5db