Passing Object props into React TypeScript Component using Nx

Photo by micheile henderson on Unsplash

Prerequisites

• Make sure you have installed Node.js version 16+.
• To follow along with this article, you’ll need a react project that is generated with Nx. If you haven’t done it yet, see this article.

You can still follow the article by creating components in your own way.

Create Person Component

For demonstration, let’s create a Person component. Run the following command.

nx g c person --dir app/components

Open person.tsx and write the following code in it.

Person Component

We defined PersonModel as a type and used it in PersonProps. And then call this component in the App Component.

Call from App Component

Open app.tsx and write the following code.

App Component

You can see that we declared a person object and passed it into the Person component.

Serve the Application

Run with nx serve and see the result.

Done

This is how we can pass objects into a react typescript component.

More Resources

Passing props into React Typescript Component using Nx

Passing Children props into React TypeScript Component using Nx