Passing data into another component - reactjs

Question

I'm trying to pass data into another component, but I'm having trouble re-rendering state so it's not a blank array when it passes the component.
Movie Card Component:
import React, { Component } from 'react';
import getMovies from './MovieAPI.js';
import MoviePoster from './MoviePoster.js';
class MovieCardII extends Component {
constructor() {
super();
this.state = {
movies: [],
};
}
componentDidMount() {
getMovies().then(results => {
this.setState(results.Search: movies)
console.log("state", this.state);
console.log(results.Search);
});
}
render() {
const { movies } = this.state;
return (
<div>
<h1> Hi </h1>
<MoviePoster movies={movies} />
</div>
);
}
}
export default MovieCardII;
MoviePoster Component
import React from 'react';
import PropTypes from 'prop-types';
const MoviePoster = props => {
const { movies } = props;
console.log(movies);
return (
<div>
{movies.map(movie => (
<div>
<h1> {movie.Poster} </h1>
</div>
))}
</div>
);
};
MoviePoster.propTypes = {
movies: PropTypes.array.isRequired,
};
export default MoviePoster;
I'm using the OMDB API and the MovieCard component is able to get a state with an array list of 10 once I am able to get the get request in.
But in the MoviePoster component, the movie array remains an empty array.
New to React so I'm struggling to understand how to pass data into another component. I am able to get the create the view I want if I don't have to pass data to another array, but I need to create one since the API i'm using is not able to get all the information I need to make another API request using the movie ID in another component later. So basically the set up will be
movieCard is the parent
movie poster, and movieInfo will be the children.
The movieInfo will pull another API request using the imdbID that I get from the movieCard component.

Answer 1

The way you have set the state is wrong
Movie Card Component:
componentDidMount(){
getMovies().then(results=> {
this.setState(results.Search: movies)
console.log("state", this.state);
console.log(results.Search);
});
}
Solution: Movie Card Component
componentDidMount(){
getMovies().then(results=> {
this.setState({movies: results.Search})
console.log("state", this.state);
console.log(results.Search);
});
}
One more change is required to MoviePoster Component
You need to specify key whenever you are looping
const MoviePoster = (props) => {
const { movies } = props;
console.log(movies);
return (
<div>
{movies.map(movie => (
<div key={movies.id}>
<h1> {movie.Poster}</h1>
</div>
))}
</div>
)
}
Hope this solution will help you.