What are the steps to pass a single TypeScript Interface object as props to a child component in React

Question

can someone please help me with the steps to pass a single TypeScript Interface object as props to a child component in React?

Answer 1

To pass a single TypeScript interface object as props to a child component in React, follow these steps:

1. Define the Interface:

// types.ts

export interface User {

  name: string;

  age: number;

  email: string;

}

2. Parent Component:

// ParentComponent.tsx

import React from 'react';

import { User } from './types';

import ChildComponent from './ChildComponent';

const ParentComponent: React.FC = () => {

  const user: User = {

    name: 'John Doe',

    age: 30,

    email: 'john.doe@example.com',

  };

  return <ChildComponent user={user} />;

};

export default ParentComponent;


3. Child Component:

// ChildComponent.tsx

import React from 'react';

import { User } from './types';

interface ChildComponentProps {

  user: User;

}

const ChildComponent: React.FC<ChildComponentProps> = ({ user }) => {

  return (

    <div>

      <h1>{user.name}</h1>

      <p>Age: {user.age}</p>

      <p>Email: {user.email}</p>

    </div>

  );

};

export default ChildComponent;