From the course: TanStack Query: Efficient Data Fetching and State Management
Join today to access over 25,500 courses taught by industry experts.
Building components for query results - TanStack Query Tutorial
From the course: TanStack Query: Efficient Data Fetching and State Management
Building components for query results
- [Instructor] Let's create a few components that are going to display all of this data. So, first things first, we'll start in our App.tsx file. We need to scroll down to the div, where we're currently just stringifying these results. So we still want to use a div here. And we'll wrap that in a set of parentheses. Then we're going to use another JSX expression. This time for mapping over these results. So results.map. For each result, we want to return a div. Within this div, we want to display some dynamic content. So the div should have a key. This key is whatever the result.data.login is. Then inside of that div, we're going to add the image. src equals result.data.avatar_url. And then let's say alt equals result.data.login. Let's also add an h2. This time with result.data.login. All right. So, back to our browser, we should see this code being rendered. Again, we're not repeating ourselves, we're just displaying the right amount of content. So if you have ever dealt with…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.