Question 246429 in Html Question posted in
Some basic documentation can be found here.

Html – why does map() display my items in a column vs a row?

I’m trying to create react movie app for my hw and I’m following a tutorial.(https://www.youtube.com/watch?v=jc9_Bqzy2YQ) I’m trying to make the movie display in a row so that I can scroll through them.

return (
    <div className='container movie-app'>
      <div className='row'>
        <div class="col-sm">
          <MovieList movies={movies} />
        </div>
          
      </div>
        
    </div>
  );
}

function MovieList(props) {
  return (
    <div>
        {props.movies.map((movie,index) => (<div>
            <img src={movie.Poster}  alt="movie"></img>
        </div>) )}
    </div>
  )
}

I’m getting an error code of

react-jsx-dev-runtime.development.js:79 Warning: Each child in a list should have a unique "key" prop.

I tried to fix the key error by assigning it key={imdbID} in movielist.js but that did nothing. I tried changing the classes of the divs to see if that would help but that also did nothing.

Tags:

3

Answers


  1. 0

    If I understand you correctly, for the row, the problem is with your CSS. You can style the div inside the map function using CSS and assign inline-block value to the display property, there are other solutions as well.

    For the key issue, maybe you added it to the img element, not the div (inside the map) and each key should be unique.

    This should fix your problems:

    function MovieList(props) {
  return (
    <div>
        {props.movies.map((movie, index) => (<div key={index} style={{display: "inline-block"}}>
            <img src={movie.Poster}  alt="movie"></img>
        </div>) )}
    </div>
  )
}

    And please make sure that you didn’t add any global div styles that can override inline-block.

    Login or Signup to reply.
  2. 0

    Your code should look like this :

    function MovieList(props) {
  return (
    <div>
        {props.movies.map((movie,index) => (<div key={index}>
            <img src={movie.Poster}  alt="movie"></img>
        </div>) )}
    </div>
  )
}

    You just need to add key={index} or whatever you want, like id if you have a move.id

    For the display in column, it’s because div is a display: block by default, if you want to be a row you need to style your div with display: inline-block
    or you can also style the parent with flex etc…

    Login or Signup to reply.
  3. 0

    Try this, it would fix the problem,

    function MovieList(props) {
  return (
    <div>
        {props.movies.map((movie,index) => (<div>
            <img src={movie.Poster} key={index} alt="movie"></img>
        </div>) )}
    </div>
  )
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search