learn-co-curriculum / react-props-movie-lab Goto Github PK

I think a lot of us are having trouble understanding what exactly this lab is asking us to do. A lot of the syntax is things we've never seen before, and I and others had a lot of trouble following the instructions. There's also an unnecessary empty string inside the interpolation brackets of the URL for the poster.

CardBack: correctly renders the genres prop as comma separated strings.

• Despite trying to use a .join(', ') for this.props.genres, I get a:

TypeError: Cannot read property 'join' of undefined

I checked the solution and that seems to be what I should be doing. Thanks!

The objective of this lab was not explained. Methods were not explained such as .map() and <img src={imgMapper[prop]} alt="" />. We never learned how to debug with React so I don't know what to do when I get an error. I think it's pretty much impossible to pass this lab without looking at the answer because these concepts weren't explained.

This is less of a comment about an error but a suggestion that you should include potentially time-saving info. The readme shows this bit of code to demonstrate how to use map to render components:

const LIST = ["Hello", "Goodbye"]

class App extends React.Component {
  generateInnerJSX = () => {
    return LIST.map(item => <List content={item}/>)
  }

This works great. HOWEVER, I think the readme should include the fact that if this line:
return LIST.map(item => <List content={item}/>)
goes to 2 different lines, then you have to put return before each line

The only reason I figured this out is that we ran into this issue in class recently (and spent a long time trying to figure out why nothing was rendering).

Here's my code for the lab

generateMovieCards = () => {
    return movieData.map( movie => {
      return <MovieCard key={movie.title}title={movie.title} IMDBRating={movie.IMDBRating} genres={movie.genres} poster={movie.poster}/>
    })
  }

If someone else runs into that problem, I think this readme should hint that you need to add a return for each line in the function, otherwise you're just wasting someone's time with an unintuitive problem

I was able to pass all 14 tests even when the app was nothing but s display of nine blank cards in my browser.

The comment on line 8 says: // map over your movieData array and return an array of the correct JSX
This is quite misleading, I started writing the JSX .map function in there. After I wrote it and it didn't work as expected I decided to take a look at the solution. The solution .map goes over MovieCard Component. Inside MovieCard component is the actual .map that maps over the movieData Array.
I would recommend to adjust the comment so it doesn't say movieData since it isn't used here.

I feel like this lab is way too difficult, given that as a student I just learned about props in the previous readme. It would be nice if there was at least one lab in between where we passed one prop down from a parent to a child, whereas this lab immediately moves to passing down props multiple levels AND does so through iterating over arrays of data. It's just way too much way too soon.