I'm trying to render a list of movies on a page using OMDbApi but nothing renders on the page yet im not getting any error in the console so im confused. the react dev tools shows contents in the array when o check the state yet nothing is still rendered on the page what am i doing wrong?

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      movies: [] //default state
    }
  };


  ponentWillMount(){
    let movieApi = '/?apikey=[apikey]&s=harry'
    fetch(movieApi)
    .then(data => data.json())
    .then(movies => this.setState({movies}))
  }

  // <li>
  //     <img src="<%= movie['Poster'] %>">
  //     <b><%= movie['Title'] %></b> -
  //     <%= movie['Year'] %>
  //   </li>
  
  render() {
    let views = <div>Loading...</div>
      const {movies} = this.state;
    if(movies && movies.length > 0) {
      views = movies.Search.map(m => (
        <li key={m}>
          <b>{m.Title}</b> - <strong>{m.Year}</strong>
        </li>
      ))
    }
    

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Wele to React</h1>
        </header>

        {views}
      </div>
    );
  }
}

export default App;

<script src=".1.0/react.min.js"></script>
<script src=".1.0/react-dom.min.js"></script>

I'm trying to render a list of movies on a page using OMDbApi but nothing renders on the page yet im not getting any error in the console so im confused. the react dev tools shows contents in the array when o check the state yet nothing is still rendered on the page what am i doing wrong?

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      movies: [] //default state
    }
  };


  ponentWillMount(){
    let movieApi = 'http://www.omdbapi./?apikey=[apikey]&s=harry'
    fetch(movieApi)
    .then(data => data.json())
    .then(movies => this.setState({movies}))
  }

  // <li>
  //     <img src="<%= movie['Poster'] %>">
  //     <b><%= movie['Title'] %></b> -
  //     <%= movie['Year'] %>
  //   </li>
  
  render() {
    let views = <div>Loading...</div>
      const {movies} = this.state;
    if(movies && movies.length > 0) {
      views = movies.Search.map(m => (
        <li key={m}>
          <b>{m.Title}</b> - <strong>{m.Year}</strong>
        </li>
      ))
    }
    

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Wele to React</h1>
        </header>

        {views}
      </div>
    );
  }
}

export default App;

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

• javascript
• reactjs

Share Improve this question Follow asked May 25, 2018 at 21:24 seyiseyi 12111 gold badge11 silver badge1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

You are getting that error because your response is an Object, not an array. You have an array named Search in your object. Change your check condition like that:

if(movies.Search && movies.Search.length > 0)

But, I prefer setting the state differently and checking the condition in a simple way.

fetch( "http://www.omdbapi./?apikey=[api_key]&s=harry" )
            .then( data => data.json() )
            .then( json => this.setState( { movies: json.Search } ) );

Then in your ponent:

const { movies } = this.state;
        if ( movies.length ) {
            views = movies.map( m => (
                <li key={m}>
                    <b>{m.Title}</b> - <strong>{m.Year}</strong>
                </li>
            ) );
        }

If nothing gets rendered make sure that your index.js file contains something like:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<App />, document.getElementById('root'));

But even after your App ponent loads the AJAX call returns

"{"Response":"False","Error":"Invalid API key!"}"

Therefore the if condition will never be true and you won't see anything other than "Loading..."