Adding comments to a page
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
Lesson Transcript
[00:00 - 00:18] Adding comments to a page. We're now ready to add the comments sections to a page. Open the pages, post, IDTSX, update the post props, add the comments, comments, an array of comment type. Now we get an error in the get static props because the comments is missing on the return type.
[00:19 - 00:26] Define the comments. For now it's gonna be an empty array and pass it along with the post. Okay, the error is gone.
[00:27 - 00:56] Now update the post component. Wrap the post body into a fragment and below the post body add comments section, get the comments from the props, pass them to the comments section and passing the post post ID. Alright, now let's update the statically generated page to use server side rendering. Change get static props to get server side props. Change the type to get server side props.
[00:57 - 01:21] Here as well, import it from next. It will work quite similar to get static props. So we can leave almost everything as it was before. Just change how we get the comments. We do await, fetch, comments for the params ID for the given post. Impertate from the API module and we are done. If you open the site in the browser, you will get an error.
[01:22 - 01:35] It is important to remove the get static paths because they cannot work with get server side props. Let's remove it. Now if we open website in the browser, then we should be able to add a comment. It should reload the page and we should see it updated.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
![Thumbnail for the \newline course Fullstack React with TypeScript Masterclass](/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Fassets.fullstack.io%2Fn%2F20220425171607321_CoverImage_FSReactWTypeScript_Masterclas.png&w=3840&q=75)