⚠️ This lesson is retired and might contain outdated information.

Extract a React View Component From a CommentQuery Component

Ian Jones
InstructorIan Jones
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 2 years ago

Generally, you want to keep your view components separate from components that fetch data.

In this lesson, we extract the view portion from our Comments component. Into another component so that we can use the same view later in the course with two separate ways of fetching comments.

Ian Jones: [0:00] The first thing we want to do is go over to our comments. We want to take all of this Urql related logic, and move it out into a separate component, so that we can have a comments component that is just concerned with the UI. We'll call this queryComments. Then we'll create a function comments().

[0:26] Comments will take comments as props. Then if there are no comments, or if it's undefined, or comments.length=, we will return null. This will make sure to avoid any rendering errors when we render our comments list. Now we'll return and then we'll grab this JSX, move it down here.

[1:11] Instead of this long path, now we will just have comments. It still expects the same data on each comment, but now this component is much simpler and then up here, all we have to do is return comments and passComments = we'll paste that path in and now when we return queryComments, we can go over to our React app. It's loading and everything works as we would expect.

[1:55] Let's touch src/components/comments/query.js. We can copy all of this. We'll go to query or comments/query, paste this in, export default queryComments. We need to import comments from. We can delete any of the queryComments code. Just doing some refactoring, so now we're exporting comments. We'll save, make sure app is still working.

[2:59] We're not getting any data because inside of our app instead of comments we need comments/query. Now it's back to where it was.

~ 2 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today