The Be Sure Blog

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() {
  return(
    <div>MorePosts</div>
  )
}       

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) {
console.log(categoryUrl);
return(
<div>MorePosts</div>
)
}