score:1

Accepted answer

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.com/?apikey=[api_key]&s=harry" )
            .then( data => data.json() )
            .then( json => this.setstate( { movies: json.search } ) );

then in your component:

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

score:0

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


Related Query

More Query from same tag