Props are one of the important concepts in React and are widely used while building React applications. So, In today's post, we will learn how we can use props in React Typescript. So let's start by first defining Props.
Understanding Props in React
In simple words, props are arguments passed from one React component to another, or in other words, props are data passed from a Parent Component to a Child Component. Props can be single-valued or objects having a set of values, they are like function arguments in JavaScript or attributes in HTML.
Using Props in React Typescript
Now that, we have an understanding of what Props are, we will see how we can use props in React Typescript. To understand better, let us consider a simple React application to display a list of some blogs. So, rather than having one single component, we will have two components BlogList.tsx and BlogItem.tsx.
BlogItem.tsx - This will be the child component that will display the details of a particular blog
BlogList.tsx - This will be the parent/main component that will display the entire list of blogs.
Let's start by defining BlogList.tsx. So, here we have defined an array of blogs that we want to display. Every blog has a title and content property and then using the javascript map function we are iterating through every blog in the array and displaying the blog title and blog content.
import React from "react";
const BlogList = () =>{
const blogs = [
{title:'Blog 1',content:'Content for blog 1'},
{title:'Blog 2',content:'Content for blog 2'},
{title:'Blog 3',content:'Content for blog 3'}
]
return (
<div>
<h1>Blog List</h1>
{blogs.map((blog)=>{
return(
<div>
<p>{blog.title}</p>
<p>{blog.content}</p>
</div>
)
})}
</div>
)
}
export default BlogList;
However, a better practice in React is to divide your page with multiple components which can be reused, also this makes the code cleaner and structured so we define our second component BlogItem.tsx, and import this component as BlogList.tsx file like this -
import React from "react";
const BlogItem = () => {
return (
<div>
<h1>Blog Title</h1>
<p>Blog Content</p>
</div>
);
};
export default BlogItem;
import React from "react";
import BlogItem from "./BlogItem";
const BlogList = () =>{
const blogs = [
{title:'Blog 1',content:'Content for blog 1'},
{title:'Blog 2',content:'Content for blog 2'},
{title:'Blog 3',content:'Content for blog 3'}
]
return (
<div>
<h1>Blog List</h1>
{blogs.map((blog)=>{
return(
<BlogItem/>
)
})}
</div>
)
}
export default BlogList
Now, this is the place where props come to the picture. As our blog data is defined in the BlogList component we will have to pass it down to the BlogItem component to display the title and content and we do this by using props in React. Additionally, we will be defining PropsType in our child component while receiving props that is we will be pre-defining the type of props our component will receive, this will make sure that the props data we are receiving from our parent component is valid.
So, let's first understand our child component BlogItem.tsx .
import React from "react";
const BlogItem = (props:PropsType) => {
return (
<div>
<h1>{props.title}</h1>
<p>{props.content}</p>
</div>
);
};
//Defining PropsType
type PropsType = {
title:string; //title property is of type string
content:string; //content property is of type string
}
export default BlogItem;
So, here as we can see our props are of type PropsType, which we have defined below, so we are making sure that the data we pass from the parent component has two properties title and content and both are of type string. We order to display the props data we use the following syntax -
{props.property_name}
Like, in the above code we have displayed the title in this manner -
{props.title}
Now that we have predefined PropTypes in our child component (BlogItem.tsx), let's see how can we pass props from our parent component (BlogList.tsx) -
import React from "react";
import BlogItem from "./BlogItem";
const BlogList = () => {
const blogs = [
{ title: "Blog 1", content: "Content for blog 1" },
{ title: "Blog 2", content: "Content for blog 2" },
{ title: "Blog 3", content: "Content for blog 3" }
];
return (
<div>
<h1>Blog List</h1>
{blogs.map((blog) => {
return(
//passing title and content of each blog as props
<BlogItem
title={blog.title}
content={blog.content} />
)
})}
</div>
);
};
export default BlogList;
So, we can see that we pass props while defining the child component in the above way and now we understand how with the help of the props we can pass data from one component to another in React.
Defining default props in React Typescript
The last thing I would like to cover is the concept of default props. Let us consider the above example only, in that we have defined two properties for props - title and content and we need to pass both the properties from our parent component otherwise we will get an error. However, suppose the blog title is the same for two of the blogs and different for the third one, so rather than passing the same content for the two blogs, we can define a default value for content property. By doing this, it will become optional for us to pass the content property for props.
This might not seem necessary for this example as it is a very simple application with 2 components, but default props can be really significant when we are using a single component in multiple places. So, let's understand how do we define default props in React TypeScript. We define the default props in the Child component, which in this case is BlogItem.tsx
BlogItem.tsx
import React from "react";
const BlogItem = (props: PropsType) => {
return (
<div>
<h1>{props.title}</h1>
<p>{props.content}</p>
</div>
);
};
//Defining the default props object
const customProps = {
content: "This is the common blog content"
};
//Using the default props property
BlogItem.defaultProps = customProps;
type PropsType = {
title: string; //title property is of type string
content: string; //content property is of type string
} & typeof customProps;
export default BlogItem;
So here, passing the content property as a prop is optional, if we don't pass the content prop from Parent Component, by default the content string we have defined - "This is the common blog content" will get displayed.
This was all about props in React TypeScript. I hope this blog was helpful for everyone 🙌