Last updated: Feb 29, 2024
Reading timeยท3 min
To pass an object as props to a component in React TypeScript:
<Employee {...obj} />
.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.
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.
Sometimes you might not know the names and types of all of the object properties in advance.
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.
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.
If you pass an entire object as a prop, you would have to access the properties on the object in the child component.
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.
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've also written a detailed guide on how to use create-react-app with TypeScript.
You can learn more about the related topics by checking out the following tutorials: