How to pass object as props to a component in React TypeScript

This tutorial gives you the methods to pass object as props to a component in React TypeScript. Keep reading the information below for detailed instructions.

Pass object as props to a component in React TypeScript

Follow these instructions to solve the problem. This is the procedure that we offer you:

• First, you must define an interface for the object’s type.
• Then, create an object of the type you just defined and pass it into the child component.

To illustrate, let us give you an example of how this method work:

import './App.css'
 
// Define an interface
interface StudentProperties {
  name: string;
  id: string;
  className: string;
  gpa: number;
}
 
// Create object
function Student({name, id, className, gpa}: StudentProperties ) {
  return (
    <div>
      <ul>
        <li><h2>Student name: {name}</h2></li>
        <li><h2>Student id: {id}</h2></li>
        <li><h2>Class: {className}</h2></li>
        <li><h2>GPA: {gpa}</h2></li>
      </ul>
    </div>
  );
}
 
export default function App() {
  const monitor = {name: 'Christopher', id: '20182222', className: 'IT_01', gpa: 3.2};
 
  return (
    <div className="content">
      <Student {...monitor} />
    </div>
  );
}

Output:

To pass the object as props to a component, we use the spread syntax(…). You can understand this syntax, which helps us unpack all a particular object’s properties.

As you can see in the program, the StudentProperties interface represents an object with 4 properties: ‘name’, ‘id’, ‘class’, and ‘gpa’.

At this point, the Student component can destructure and use all of the passed props.

In some special cases, you may not know the type or name of a particular property in advance. We recommend using the index signature, as shown in the following example:

import './App.css'
 
// Define an interface
interface StudentProps {
  name: string;
  id: string;
  className: string;
  gpa: number;
  [key: string]: any;
}
 
// Create object
function Student({name, id, className, gpa, status}: StudentProps) {
  return (
    <div>
      <ul>
        <li><h2>Student name: {name}</h2></li>
        <li><h2>Student id: {id}</h2></li>
        <li><h2>Class: {className}</h2></li>
        <li><h2>GPA: {gpa}</h2></li>
        <li><h2>Student status: {status}</h2></li>
      </ul>
    </div>
  );
}
 
export default function App() {
  const monitor = {name: 'Christopher', id: '20182222', className: 'IT_01', gpa: 3.2, status: 'Final year students'};
 
  return (
    <div className="content">
      <Student {...monitor} />
    </div>
  );
}

Output:

The code {[key: string]: any} means that when a property is indexed by a value of type ‘string’, it will return a value of any type. This also means that the Student component will have an extra dynamic property.

Summary

To sum up, to pass object as props to a component in React TypeScript, you need to define an interface for the object’s type and pass the object of the specified type into the child component. That’s the end of this tutorial. We hope the information provided in this post will be helpful to you.

Maybe you are interested:

• Adding Types to Refs in React using TypeScript
• Declaring getters/setters in Interfaces in TypeScript

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js