Passing Boolean String Number and JSON Objects to React Components in TypeScript

Hey everyone! Welcome to my fourth blog post in this series on learning React with TypeScript. If you’ve been following along, we’ve already covered how to:

• Create a basic “Hello World” app

• Build and use React components

• Pass props to React components in TypeScript

In this post, we’ll take a step further and learn how to pass different types of data — including boolean, string, number, and even a JSON object — to function components using TypeScript.

We’ll continue from the project used in the second post, named "BASIC-Component". If you haven’t read that yet, I recommend checking it out first before proceeding.

1. Passing a Boolean Value to a Component

Let’s begin with a simple use case — passing a boolean value.

Update your Header component as shown below:

type Props = {
  isLoggedIn: boolean;
};

const Header: FC<Props> = ({ isLoggedIn }) => {
  return (
    <div className="App-header">
      <p>{isLoggedIn ? "Welcome back!" : "Please log in."}</p>
    </div>
  );
};

Now, update your App.tsx file to pass the isLoggedIn prop:

function App() {
  return (
    <div className="App">
      <Header isLoggedIn={true} />
      <div>
        <h1>Home Page</h1>
      </div>
      <Footer  />
    </div>
  );
}

2. Passing String, Number, and Year Values

Next, let’s update the Footer component to accept a combination of string, number, and year values via an object. Here’s how you can define a type for this:

// Define the data structure for footer props
export type FooterData = {
  copyRight: string;
  version: number;
  year: number;
};

type Props = {
  footerData: FooterData;
};

const Footer: FC<Props> = ({ footerData }) => {
  return (
    <div>
      ©{footerData.year} - {footerData.copyRight} <b>{footerData.version}</b>
    </div>
  );
};

And now, in your App.tsx, pass the footerData object:

const footerInfo = {
  copyRight: "theravinder.com",
  version: 1.2,
  year: new Date().getFullYear(),
};

function App() {
  return (
    <div className="App">
      <Header isLoggedIn={true} />
      <div>
        <h1>Home Page</h1>
      </div>
      <Footer  footerData={footerInfo} />
    </div>
  );
}

By using FooterData and TypeScript’s strict typing, we ensure that each property is passed with the correct type — improving code quality and reducing errors.

3. Passing a JSON Object to a Component

Finally, let’s look at how to pass a JSON object to a component. For this, we’ll create a new component named UserDetail.tsx:

import { FC } from "react";

export type User = {
  name: string;
  emailAddress: string;
  moobileNumber: string;
};

type Props = {
  user: User;
};

const UserDetail: FC<Props> = ({ user }) => {
  return (
    <>
      <div>
        <h1>User Detail</h1>
      </div>
      <div>
        <p>Name: {user.name}</p>
        <p>Email: {user.emailAddress}</p>
        <p>Mobile: {user.moobileNumber}</p>
      </div>
    </>
  );
};

export default UserDetail;

Now, let’s include UserDetail in App.tsx and pass the user JSON object:

import UserDetail, { User } from "./components/UserDetail";

const userInfo: User = {
  name: "John Doe",
  emailAddress: "john@example.com",
  moobileNumber: "123-456-7890",
};

function App() {
  return (
    <div className="App">
      <Header isLoggedIn={true} />
      <div>
        <h1>Home Page</h1>
      </div>
      <UserDetail user={userInfo} />
      <Footer footerData={footerInfo} />
    </div>
  );
}

Wrapping Up

That’s it for today! In this post, you’ve learned how to:

✅ Pass boolean values
✅ Pass string and numeric values
✅ Dynamically use the current year
✅ Pass JSON objects with defined types

Using TypeScript in your React apps not only gives you better tooling and auto-completion but also makes your code more reliable and maintainable.

In the next blog, we’ll dive into passing event handlers and working with useState to handle user interactions. Stay tuned, and happy coding!

Project code on GitHub https://github.com/ravinder25886/basic-component/tree/feature/typed-component-communication