How pass API info from a react component to another?

Question

i am fighting with a react app with a movie API (https://developers.themoviedb.org) hahaha. I have a list component with movie and tv cards. I map a list state and put the info in my cards (id, title and poster). When i click in my card, the site must show movie information. So, i have another component named movies.jsx and there i have another three components: hero.jsx (who contains a img from the movie), menuHero.jsx (a menu) and movieInfo.jsx (that contains the title, a little desc from the movie and blabla). I need fill this three components with the api info. My component movies.jsx show me the id (i put that in a < h2> just for see if its working) but i don't find a way to give them the api info to my another three child components.

Also, the movieData its empty. So, i dont know what im doing wrong.

Here is my code:

const Movies = props => {
    
    const [movieData, setMovieData] = useState([]);
    const { match } = props;
    const movieId = match.params.id;
   
    
    useEffect(() => {
        axios.get(`https://api.themoviedb.org/3/movie/${movieId}?api_key=${api-key}`)
            .then(res => {
                setMovieData(res.data);
                console.log(movieData)
            }).catch(error => console.log(error))
    }, []);

    return(
        <div className="container-section">
            <h2>{match.params.id}</h2>
            <Hero />
            <MenuHero />
            <MovieInfo />
        </div>
    )
}

export default Movies; 
    enter code here

score 2 · Answer 1 · answered Aug 25 '20 at 18:18

2

You can pass that data as props:

return movieData && (
        <div className="container-section">
            <h2>{match.params.id}</h2>
            <Hero movieData={movieData} />
            <MenuHero movieData={movieData} />
            <MovieInfo movieData={movieData} />
        </div>
    )

More info: https://reactjs.org/docs/components-and-props.html

answered Aug 25 '20 at 18:18

domenikk

1,723
1
10
12

Yes but movieData its empty. I am not getting the movie info. I dont believe that is wrong the route because the < h2> show me the id and its the same. So i dont know why the state its not working – Hey Aug 25 '20 at 18:23

score 0 · Answer 2 · answered Aug 25 '20 at 18:34

0

You need to get an API key and movie ID from themoviedb, ${movieId} ${api-key} should be your key which should be stored as an environment variable. (.env) file and to access that key you'll need to use process.env.(VARIABLE_NAME) to get the desired value. That's why you're not getting any data from your get requests.

answered Aug 25 '20 at 18:34

Jack Fratto

33
3

I have the api key written in my movies.jsx i just put that ${api-key} to not share my personal api key. – Hey Aug 25 '20 at 18:55

How pass API info from a react component to another?

2 Answers2