Props variable is not found - reactjs

Question

I'm learning react native using expo-cli. I'm working on a little exercise to display information about movies after fetching them from API using axios http client. But when I try to pass data from a parent component MoviesList to a child component MovieDetails I get the following screen:
Here is my App component code :
import { View } from 'react-native';
import React, { Component } from 'react';
import Header from './src/components/Header';
import MoviesList from './src/components/MoviesList';
import axios from 'axios';
const API_KEY = "mykey";
class App extends Component {
constructor(props) {
super(props);
this.state = {
movies:[],
movieToSearch:"avengers"
};
}
componentDidMount=async()=>{
const res = await axios.get(`http://www.omdbapi.com/?s=${this.state.movieToSearch}&apikey=${API_KEY}`);
// const data=await res.json();
this.setState({ movies:res.data.Search });
}
render() {
return (
<View style={ { flex:1 } }>
<Header title={"Films"} />
<MoviesList movies={ this.state.movies } />
</View>
);
}
}
export default App;
Code for MoviesList.js:
import React,{ Component } from 'react';
import { View } from 'react-native';
import MovieDetails from './MovieDetails';
class MoviesList extends Component{
renderMovies(){
const { movies } = this.props;
if(movies){
return movies.map(movie => {
return <MovieDetails key={ movie.imdbID } movie = { movie } />
});
}else{
return;
}
}
render(){
return (
<View>
{ this.renderMovies() }
</View>
)
}
}
export default MoviesList;
Code for MovieDetails.js:
import React from 'react';
import { View, Text } from 'react-native';
import Card from './Card';
import CardSection from './CardSection';
import Button from './Button';
const MovieDetails = () =>{
const { Title, Year, Poster } = props.movie;
return (
<Card>
<CardSection>
<Text>{ Title }</Text>
</CardSection>
<CardSection>
<Text>{ Title }</Text>
</CardSection>
<CardSection>
<Button btnLabel="Voir les details" />
</CardSection>
</Card>
)
}
export default MovieDetails;
Everything seems good in my code, and I don't know where the error is coming from.
Here is the github repo so that you can test it locally :https://github.com/jochri3/movieslist

Answer 1

convert
const { Title, Year, Poster } = props.movie;
return (
<Card>
<CardSection>
<Text>{ Title }</Text>
</CardSection>
<CardSection>
<Text>{ Title }</Text>
</CardSection>
<CardSection>
<Button btnLabel="Voir les details" />
</CardSection>
</Card>
)
}
to
const MovieDetails = ({movie}) => ({
<Card>
<CardSection>
<Text>{ movie.Title }</Text>
</CardSection>
...
</Card>
})
and
class MoviesList extends Component{
renderMovies(){
const { movies } = this.props;
if(movies){
return movies.map(movie => {
return <MovieDetails key={ movie.imdbID } movie = { movie } />
});
}else{
return;
}
}
render(){
return (
<View>
{ this.renderMovies() }
</View>
)
}
}
with
class MoviesList extends Component{
constructor(props){
super(props)
}
renderMovies = () => {
const { movies } = this.props;
return movies.map(movie => {
return <MovieDetails key={ movie.imdbID } movie = { movie } />
});
}
render(){
return (
<View>
{ this.renderMovies() }
</View>
)
}
}

Answer 2

Functional components pass props as an argument.
const MovieDetails = () =>{
const { Title, Year, Poster } = props.movie;
return (
<Card>
...
To this:
const MovieDetails = (props) =>{
const { Title, Year, Poster } = props.movie;
return (
<Card>
...

Answer 3

You are using functional component for MovieDetails as follow:
const MovieDetails = () => {
const { Title, Year, Poster } = props.movie;
.......
}
But actual implementation for it is as follow:
const MovieDetails = (props) => {
const { Title, Year, Poster } = props.movie;
......
}
I hope it help you.

Answer 4

const MovieDetails = () =>{
has to be
const MovieDetails = props => {
The component is a function and props are its argument.