The Be Sure Blog

Code Snippets | Problem Solving | Tips & Tricks

The Be Sure Blog banner

How to pass variables down to child components

posted on 22.1.2023 by Below Surface in "React"

Let's say in the parent component we have the variable "categoryUrl", which should be passed down to the child component "MorePosts". Currently, the child component just looks like this:

<MorePosts />

To pass down the local variable "categoryUrl", which is a string in this case, just add it like this:

<MorePosts categoryUrl={categoryUrl} />

Now, within the "MorePosts" component, two things need to happen.

  1. We want to receive the string value of "categoryUrl"
  2. We want to make the TypeScript compiler happy, e.g. have no errors

Firstly, we can tell TypeScript, which data type the incoming variable will have. For this, just add the following type declaration before the React function declaration:

type PageProps = {
  categoryUrl: string

The current function declaration of the component may look like this:

function MorePosts() {

Now we destructure the incoming "categoryUrl" string, to be used within the local scope of the "MorePosts" component and will be able to console log the string value:

function MorePosts({ categoryUrl }: PageProps) {


return( <div>MorePosts</div> ) }



More posts of this category

Conditionally add a HTML attribute in React

How to add a HTML attribute like "selected" to a HTML element


An easy and elegant way to change a boolean useState value

How to toggle a useState boolean value easily


Scroll to the page top after rendering a React component

Fix the annoying SPA issue and scroll to the top!


How I fixed the auto scroll bug of ReactQuill

Quill is a nice WYSIWYG text editor, but had a weird scroll bug