Giter VIP home page Giter VIP logo

react-props-movie-lab's People

Contributors

aspenjames avatar danielseehausen avatar dependabot[bot] avatar ihollander avatar lizbur10 avatar maxwellbenton avatar rrcobb avatar thuyanduong-flatiron avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-props-movie-lab's Issues

Instructions Unclear and Generally Too Difficult

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.

Browser functionality.

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

Not Super Clear On Instructions

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.

difficulty ramp-up

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.

Cardback Test Error

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!

Misleading comment in MovieShowcase.js

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.

Unaddressed problem that students might run into

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.