Pass Object as props to a component in React TypeScript

avatar

Borislav Hadzhiev

Last updated: Apr 21, 2022

banner

Photo from Unsplash

Pass Object as props to a component in React TypeScript #

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

  1. Define an interface for the type of the object.
  2. Pass an object of the specified type to the child component, e.g. <Employee {...obj} />.
App.tsx
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> ); }

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
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.

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

App.tsx
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> ); }

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 an 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.

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
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> ); }

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
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> ); }

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

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.