Pass Object as props to a component in React TypeScript

# Pass Object as props to a component in React TypeScript

To pass an object as props to a component in React TypeScript:

Define an interface for the type of the object.
Pass an object of the specified type to the child component, e.g. <Employee {...obj} />.

App.tsx

Copied!
interface EmployeeProps {
  name: string;
  age: number;
  country: string;
}

function Employee({name, age, country}: EmployeeProps) {
  return (
    <div>
      <h2>{name}</h2>
      <h2>{age}</h2>
      <h2>{country}</h2>
    </div>
  );
}

export default function App() {
  const obj = {name: 'Alice', age: 29, country: 'Austria'};

  return (
    <div>
      <Employee {...obj} />
    </div>
  );
}

pass object as props to component in react typescript

The code for this article is available on GitHub

We used the spread syntax (...) to pass an object's properties as props to a component.

The EmployeeProps interface represents an object with 3 properties.

An easy way to think about this syntax is that we're unpacking the properties of the object in places where zero or more key-value pairs are expected.

App.js

Copied!
const obj2 = {...{a: 1, b: 2}};

console.log(obj2); // 👉️ {a: 1, b: 2}

Now the Person component can destructure and use all of the passed props.

If you get the warning prop spreading is forbidden, click on the link and follow the instructions.

If you need to pass an object as props in a React application that doesn't use TypeScript, check out the following tutorial.

# Passing an object with dynamic properties as props

Sometimes you might not know the names and types of all of the object properties in advance.

App.tsx

Copied!
interface EmployeeProps {
  [key: string]: any; // 👈️ allows dynamic keys and values
  name: string;
  age: number;
  country: string;
}

function Employee({name, age, country, tasks, salary}: EmployeeProps) {
  return (
    <div>
      <h2>{name}</h2>
      <h2>{age}</h2>
      <h2>{country}</h2>
      <h2>{salary}</h2>

      <h2>{JSON.stringify(tasks)}</h2>
    </div>
  );
}

export default function App() {
  const obj = {name: 'Alice', age: 29, country: 'Austria'};

  // 👇️ can pass properties we haven't specified in advance
  const obj2 = {tasks: ['dev', 'test'], salary: 100};

  return (
    <div>
      <Employee {...obj} {...obj2} />
    </div>
  );
}

passing object with dynamic properties as props

The code for this article is available on GitHub

The {[key: string]: any} syntax is an index signature in TypeScript and is used when we don't know all the names of a type's properties and the shape of the values ahead of time.

The index signature in the example means that when the object is indexed with a string, it will return a value of any type.

The EmployeeProps type means that the component has to be passed name, age and country properties of the specified types, but it can also be passed other dynamic keys pointing to values of any type.

If you want an object with dynamic keys and values without required properties, remove the name, age and country properties and leave the index signature.

I've also written an article on how to pass a function as props in React TypeScript.

# Passing an entire object as a Prop to a component

If you pass an entire object as a prop, you would have to access the properties on the object in the child component.

App.tsx

Copied!
interface EmployeeProps {
  data: { // 👈️ have to nest properties
    name: string;
    age: number;
    country: string;
  };
}

function Employee({data}: EmployeeProps) {
  return (
    <div>
      <h2>{data.name}</h2>
      <h2>{data.age}</h2>
      <h2>{data.country}</h2>
    </div>
  );
}

export default function App() {
  const obj = {name: 'Alice', age: 29, country: 'Austria'};

  // 👇️ passing data prop that is an object
  return (
    <div>
      <Employee data={obj} />
    </div>
  );
}

passing entire object as props to component

The code for this article is available on GitHub

Notice that we had to specify the data property in the interface.

You can get around having to access each property on the data object by destructuring one level deeper.

App.tsx

Copied!
interface EmployeeProps {
  data: {
    name: string;
    age: number;
    country: string;
  };
}

// 👇️ destructure one level deeper
function Employee({data: {name, age, country}}: EmployeeProps) {
  return (
    <div>
      <h2>{name}</h2>
      <h2>{age}</h2>
      <h2>{country}</h2>
    </div>
  );
}

export default function App() {
  const obj = {name: 'Alice', age: 29, country: 'Austria'};

  return (
    <div>
      <Employee data={obj} />
    </div>
  );
}

The code for this article is available on GitHub

However, the syntax is much cleaner when we use the spread syntax (...) to unpack the key-value pairs of an object as props.

I've also written a detailed guide on how to use create-react-app with TypeScript.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Pass Object as props to a component in React TypeScript