score:1
In your fetchBooks()
you set the bookSearch
state to its own value every time by calling setBookSearch(bookSearch)
. As the value of bookSearch
is an empty array by default, it will be an empty array every single time. Make sure you update the state with the fetched data
:
const fetchBooks = async () => {
const res = await fetch(URL);
const data = await res.json();
setBookSearch(data);
console.log(bookSearch); // it's not yet set!
};
You also tried to log the state right after you "updated" it. Don't forget that useState
is asynchronous just like setState
in class components. You can't update the state on one line and assume it's already changed on the next one. You'll likely log the unchanged state. If you want to log the new value once it's changed, you can use the useEffect
hook.
Source: stackoverflow.com
Related Query
- Empty response from API with React
- React query mutation: getting the response from the server with onError callback when the API call fails
- Sending response of multiple api calls from action to view file in react js with redux
- How to add multiple Objects to an empty array react after getting response from Api react
- React app fetch() response is empty although API endpoint returns data when sending a GET request from somewhere else
- React JS / Node JS : Problem mapping array with objects inside from fetch API response
- React Component: Need to format an address from an API response and pass it to a component with copy to clipboard functionality
- Fetching a data text from API response and presenting it in a chat with React
- react get data from rest api with axios and and useEffect redering empty array plus array with data
- Paginate date-specific results from an API with React and Redux
- React wait for a specific response from API
- Unit testing: react context api with enzyme return an empty object
- React - Downloading a Zip File from API Response Body in Bytes String?
- Uploading images from react with laravel api
- Get a specific response header (e.g., Content-Disposition) in React from an ASP.NET CORE Web Api
- Fetching from API endpoint with React returns value undefined
- How can I make a request to an API based on the response from another request? React Hook "useSwr" cannot be called inside a callback
- setState from an API response using superagent and React
- React js - API response in this.state is empty object
- React hook forms with nested fields array from an async source returns empty array
- Make a second API call based on first api call response in React with hooks
- React images caption error from api maybe to do with correct Index
- I get data from Api but when I try to set the value with useState it give me an empty object
- Downloading a video from an API in React using Axios creates an empty mp4 file
- How to dispatch response data from api on action in react redux?
- Fill context from REST API and use it in a React component with useEffect and useContext
- Is there a way to map a value of a response from an API in React to some predetermined values, which would then determine what is rendered?
- Fetch API not working with Rails + React from Webpacker
- I can't get a response from github api using redux with react.js
- Push object from JSON rest api into empty array not working in React
More Query from same tag
- Mock child component callback with Jest and Enzyme
- Anchor navigation using the <a> tag inside a react component
- How to not shink the white background field when no text or having only the white space
- React Router v4 - Dynamic Config with the changed default route
- React js Change Field specifying the attribute name
- Uncaught TypeError: this.props.signinUser is not a function(…)
- React State filtering with Context
- Image from Cloud Storage is not redendring in .map list
- How to Add seprate Loader file on a onClick event button on ReactJS?
- How to update state array dynamically in React?
- Parent state change generates a child re-render when the child does not have that state as a prop [Virtual DOM]
- How to merge and unzip (.zip, .z01, .z02) in javascript (client side only)?
- Store/retrieve config settings in React project with Typescript
- 'TypeError: illegal operation attempted on a revoked proxy' when using Immer with setState
- How to get the path to a file outside the root folder in React application
- react-native: borderRadius does not frame component right
- RelayJS infinite scroll
- How to apply this functionality without refs and DOM manipulation
- Clicking on radiobutton returns undefined values
- Targeting nested object properties inside an parent object
- Network Requests Throttling in React Class Components
- Rewrites and redirects in AWS amplify
- Conditional inside map() doesn't work as intended (React)
- React Router will not take array as prop for a component
- Get the ID of a selected Card element and pass it to a modal to select the element
- Webpack + Babel error
- Handling state when making multiple function calls in React with hooks as a parameter
- React Localstorage values resetting after refresh
- Call a React component method from outside
- React.js setState not working