score: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.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..."
Source: stackoverflow.com
Related Query
- React app rendering empty page with no error from the console
- React app with express and axios gives error on rendering the data
- Trying to deploy my React app with gh-pages but got this error message : The "file" argument must be of type string. Received type undefined
- React app showing page with "404 the requested path could not be found" when using Apache
- Serving a static html page from a single page react app with react router
- How to avoid error 'Unexpected token <' with a React app when running babel from a CDN?
- How to I prevent user from accessing the page of my react app directly by entering the URL, and redirect them back to login page
- Reactjs=> React App rendering blank page error
- Getting a different port ERROR in the console while uploading image from the frontend using react js to the Mongo db
- error rendering facebook react with java (clojure) in the server: Cannot read property "__reactAutoBindMap"
- want to go to SignUp page when clicked on SignUp from the App component in React can some one rectify the code accordingly
- Why is there a delay in my React budget app in calculating a total, updating state with setState and then rendering it to the UI?
- my page is not rendering with different id on the same page when i use link in react components
- React error not a function even with me console logging the value?
- NVD3 chart in React app draws html that do not ever then disappear from the page
- How to load an image onto the page with react from dynamic data?
- Mirage JS json data is console logging but not rendering on the page in React
- 404 error when rendering component from state in react-redux app with react-routerv4?
- With react , I am trying to add a section where it shows facts for 5 second intervals. No error shown, but the facts aren't appearing on the page
- Submit From with Enter key without refreshing the page in React
- How to hide the navbar from the login page with react router?
- Not able to access detail information from Api using React Router not rendering on the page
- Build the docker with react app throws error
- error with react script rendering script tag in the body
- React Server Side Rendering - how to render from the server with :productId params passed in?
- How to load a page with the data from a component in react
- Blank page after running build on the react app and errors on the console
- If I refresh the browser my react app are being page not supported error message
- Error with calling graphQl mutation from react app
- Rendering a react app with data from nodejs server
More Query from same tag
- onSubmit function in react not firing
- Where does the root reducer come from in this redux react example and how does dispatch knows which reducer to go?
- Loading React hooks using dynamic imports?
- How to write Superscript in ReactJS in navigation bar
- Using Nodemailer to send PDF specified in a React App
- File Upload with Progress React
- Git workflow for html/css and javascript mvvm framework integration separate repos
- react native: There is way to fix the check boxes in my example?
- React JS not working with Internet Explorer 9
- Firebase authentication: how to resolve 'TypeError: Cannot read property 'getIdToken' of null' error
- Restricting textarea to add text more than it's height
- How to render another react component on a single button click? (Functional Component)
- How to update state by useEffect in React?
- A blinking text with React using the CSS property visibility
- How do you test a redux connected react component by exporting it as a PureComponent?
- React Material UI: Make textfields stay in one row
- React-Leaflet render local tiles in development environment
- change state before and after print for displaying only on print
- React is rendering md (remarkable) as a string
- ReferenceError: Highcharts is not defined(React JS)
- React/Redux - Trigger action once previous action has completed
- Use package.json data in HTML ReactJS
- How do I set a global font colour in React which uses Material UI
- How to get event in onChange of Editor in Draft.js?
- Added todo-object in array(state) is not reversed immidiately
- How to show different icon in active NavLink in react-router-dom v6?
- Rerender Function Component on Object Attribute change
- Avoiding repeating state names
- Bootstrap - Having Navbar in the top of the page then center the form
- Chained Arrow function syntax