5/3/2023 0 Comments React fetchI'm able to log the first quote in the array to the console when I run the async function, however when I try to use that same async function to return that quote to myQuote, it returns a Pending Promise. I've created a new codepen, separate to the task, where I have been testing how to get this to work without React, so I can then work it into my React project when I know what to do. I think it's a problem that I must've misunderstood/not quite wrapped my head around asynchronous functions yet I'm able to fetch the json and log the quotes to the console, however whenever I try to assign them to a variable, I end up with the promise object. I'll then use a random num gen to pick a random quote to display from the array. I want to fetch a json and assign the array within it to state within my react component. Doing the FCC course, essentially completed a project but trying to fetch a JSON with an array rather than just putting one in directly, myself, as I wanted to learn how to do it. Now all we have to do is add the data we’ve retrieved from our GET request to the `notes` in our state.Been banging my ahead against a wall on this one for a while. It is quite simple: const = useState('') Add useState to your import and let’s initialize our state. Add the retrieved data to state and pass it to a child component. (Guess who is calling this out because she initially forgot to add it and made hundreds of API calls □). We’re essentially telling useEffect to only run on render, because we’re passing it an empty value. This second argument tells useEffect to only render if certain values have changed. Adding the empty brackets as an argument is necessary so the code doesn’t run in an infinite loop. UseEffect runs after the component is rendered. (I’m using React Router to show this component).Īdd `useEffect` to your React import, and simply call the function inside the useEffect hook: useEffect(() =>, ) We will use the useEffect hook to call this function when the Parent component mounts. But right now the GET request is wrapped in a function. Our overview page should display all of our notes as soon as it loads. But first! Make the GET request when the page renders We’re going to display this content on the frontend with React later. (MongoDB adds the `_id` and `_v` properties). The `notes` key contains the value `allNotes`, which is an array of 11 notes that each have an `author`, `title`, and `content` property. The content of my notes is from this wonderful NPR article about Rachel Syme. With the request, the parent component code looks like this: Our request will be stored in a function called getAllNotes(). I saved the URL body as a variable, and added the endpoint `notes` inside the request (an optional step, but creates more readable code). We want to store this request inside a function.īasic Axios is the axios object, the HTTP method used, and the URL as a parameter. ![]() Now that axios is installed, we can use it to make a GET request to retrieve all of the notes in our database. I’m going to use axios to get all of my notes, which I stored in a database. Use npm i axios to install axios and then add it as an import to your parent component. The notes will dynamically render in my React app with their own card that contains their title and content. This page is going to be an overview page for notes that I have stored in my database. We will use two components here: a parent component to get the data, and then a child component to display the data. ![]() The method described can be done with any API, but I am using an endpoint I created in Express, so my url will be my local host. It assumes that you have a known endpoint and a datasource. I route my data using an Express backend and store it in MongoDB, but this article won’t be about that. This article will go over how to fetch data with Axios in React, save it to state, and then display it in a React component.
0 Comments
Leave a Reply. |