setState hook does not set value

Question

I'm triggering setClickedMovieId using onClick event. I also use useEffect to check if the value of state is set correctly, however, it consoles out the default value (zero).

I need to save the id of a clicked item in order to be able to use it at <NavLink to={"movie/" + clickedMovieId}>.

const MovieCards = () =>  {
  const { movies } = useContext(MoviesContext);  
  
  const [clickedMovieId, setClickedMovieId] = useState<number>(0);

  useEffect(() => {
    console.log('Current value of movie id state', clickedMovieId);
  }, [clickedMovieId]);

return (
    <div >
      <Grid container spacing={1}>
      {movies.map((movie) => (
        <Grid item xs={6} sm={2} key={movie.id}>
          <NavLink to={"movie/" + clickedMovieId}>
            <Card className="card">
              <CardActionArea>
                <CardMedia
                  component="img"
                />
              </CardActionArea>
              <CardActions>
                <Button size="small" color="primary">
                  <FavoriteBorderIcon />
                </Button>
                <Button size="small" color="primary" onClick={() => setClickedMovieId(movie.id)}>
                  {movie.rating}
                </Button>
              </CardActions>
            </Card>
          </NavLink>
        </Grid>
      ))}
      </Grid>
    </div>
  );
}

export default MovieCards;

How can I fix it?

Thanks!

Answer 1

Solution: <NavLink to={"movie/" + movie.id}>