React not passing props to component

Question

I have just started learning React and trying to pass props down to child component as I have seen in many tutorials & react docs . But I can't see any props passed in my child component. I have installed React Developer Tools in Chrome

My code is as follows:

App.js

import React, { Component } from 'react';
import './App.css';
import Movies from './Components/Movies';
import GetMovies from './Data/MoviesServie';

class App extends Component {
  constructor() {
    super();
    this.state = {
      movies: []
    };
  }

  componentDidMount() {
    const movies = [...GetMovies()];
    this.setState({ movies });  // 1. setting state
  }

  render() {
    return <Movies movie={this.state.movie} />; // NOT WORKING
  }
}

export default App;

I have also tried console logging and found following things are called in sequence

• constructor called ( obviously )
• render
• componentDidMound // here I am setting state but still it is logging blank array
• render ( again render with state is set with array of objects )

But when I see props in <Movies /> component I didn't see anything there. Props is null/blank there.

I don't know what is the problem, every tutorial shows the method, which I am using here.

Answer 1

You missed a letter

Change return <Movies movie={this.state.movie} />;

To return <Movies movie={this.state.movies} />;