CODEWITHSUNDEEP
reactjs
Ricardo de Paula
Ricardo de Paula

Reputation: 632

My event onClick in my map does not work. Very strange behavior

My Onclick on bestmovies map does not work. If I place it on a H1, for example, works. onClick={handleClickMovie}

// imports....

const Movies = () => {
  const [popularMovies, setPopularMovies] = useState([])
  const [bestMovies, setBestMovies] = useState([])
  const [showPopUp, setShowPopUp] = useState(false)

  const handleClickMovie = () => {
    setShowPopUp(console.log('Clicked'))
  }

  useEffect(() => {
    async function getMovies() {
      const responsePopularMovies = await getPopularMovies()
      setPopularMovies(responsePopularMovies.results)

      const responseBestMovies = await getBestMovies()
      setBestMovies(responseBestMovies.results)
    }
    getMovies()
  }, [])

  return (
    <div>
      <Wrapper>
        {showPopUp ? <MoviePopUp /> : null}
        <h1>Filmes Populares</h1>
        <Content>
          {popularMovies.map(item => (
            <MovieItem movie={item} />
          ))}
        </Content>
        <h1>Filmes Bem Avaliados</h1>
        <Content>
          {bestMovies.map(item => (
            <MovieItem movie={item} onClick={handleClickMovie} />
          ))}
        </Content>
      </Wrapper>
    </div>
  )
}

export default Movies

MovieItem.js

import React from 'react'
import { Cover, Score, Title } from './MovieItem.styles'

const MovieItems = ({ movie }) => {
  return (
    <Cover key={movie.id}>
      <img
        src={`https://image.tmdb.org/t/p/original${movie.poster_path}`}
        alt="capas"
      />
      <Score>{movie.vote_average}</Score>
      <Title>{movie.title}</Title>
    </Cover>
  )
}

export default MovieItems

Upvotes: 0

Views: 65

Answers (4)

wtfzambo
wtfzambo

Reputation: 628

@anthony_718's answer is correct.

The reason it didn't work it's because <MovieItem> doesn't have onClick in his props.

However, to facilitate reusability, you can modify your component like so:

const MovieItems = ({ movie, onClick }) => {
  return (
    <div onClick={onClick}>
      <Cover key={movie.id}>
         // ... rest of your stuff
      </Cover>
    </div>
  )
}
export default MovieItems

It's essentially the same solution, but by placing <div onClick> within the component definition, you make it more reusable than the other option.

Upvotes: 1

Abraham Labkovsky
Abraham Labkovsky

Reputation: 1956

As @anthony_718 answered, you are calling onClick on a JSX component. JSX components aren't in the DOM and don't have click events (although they can render HTML elements if they contain them).

If you want, you can also pass the props all the way up to an actual html element the <Cover> renders.

Upvotes: 1

anthony_718
anthony_718

Reputation: 474

try wrapping in a div

 <Content>
      {bestMovies.map(item => (
        <div onClick={handleClickMovie}>
            <MovieItem movie={item} onClick={handleClickMovie} />
        </div>
      ))}
    </Content>

Upvotes: 1

Rasheed Qureshi
Rasheed Qureshi

Reputation: 1273

check this

bestMovies.map((item, i) => { return( <MovieItem movie={item} onClick={handleClickMovie} /> )})

Upvotes: 0

Related Questions