CODEWITHSUNDEEP
reactjsreact-nativeexporeact-props
Christian LSANGOLA
Christian LSANGOLA

Reputation: 3307

Props variable is not found

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:

My 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

Upvotes: 0

Views: 1369

Answers (4)

Kamal Pandey
Kamal Pandey

Reputation: 1598

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>
        )
    }
}

Upvotes: 1

Muhammad Mehar
Muhammad Mehar

Reputation: 1055

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.

Upvotes: 1

Sulthan
Sulthan

Reputation: 130102

const MovieDetails = () =>{

has to be

const MovieDetails = props => {

The component is a function and props are its argument.

Upvotes: 0

Davin Tryon
Davin Tryon

Reputation: 67296

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>
...

Upvotes: 1

Related Questions