useState variable not getting passed through props-CodePudding

I'm trying to pass a string to another component via props but its coming through as an empty object. My other variables come out the other end just fine. Is there a different way to pass props that aren't objects? I can't figure out what I'm doing wrong here.

import React, { useState, useEffect } from "react";
import axios from "axios";
import Movie from "./Movie";

const MovieList = () => {
  const [movies, setMovies] = useState([]);
  const [imageUrl, setImageUrl] = useState("");

  const API_KEY = "XXXXXXXXXXXXXXXXXXXXXX";

  const getMovies = async () => {
    const response = await axios.get(
      `https://api.themoviedb.org/3/discover/movie?api_key=${API_KEY}&language=en-US&with_genres=27`
    );

   
    setMovies(response.data.results);
    
  };

  const getImages = async () => {
    const img = await axios.get(
      `https://api.themoviedb.org/3/configuration?api_key=${API_KEY}`
    );
    setImageUrl(img.data.images.base_url);
  };

  useEffect(() => {
    getMovies();
  }, [setMovies]);

  useEffect(() => {
    getImages();
  }, [setImageUrl]);

  return (
    <div>
      {movies.map((movie, idX) => (
        <Movie movie={movie} id={idX} imageUrl={imageUrl} />
      ))}
      <p>{imageUrl}</p>
    </div>
  );
};

export default MovieList;

import React from 'react'

const Movie = ({movie}, imageUrl, idX) => {
    return (
        <div>
                <h3 key={idX}>{movie.title}</h3>
                <img src={movie.poster_path} alt="" />
          
        </div>
    )
}

export default Movie

CodePudding user response：

When React calls your component function, it will pass props as a single object, which you can then destructure. Change

const Movie = ({movie}, imageUrl, idX) =>

const Movie = ({movie, imageUrl, idX}) =>