How To Pass Functions As Props In React TypeScript

This article will show you how to pass functions as props in React TypeScript in some ways, for example, using an interface or typeof method. Read on it to understand more.

How to pass functions as props in React TypeScript

Currently, Prop is an acronym for Properties. Props are considered one of the ways to help pass data from parent components down to child components.

If you pass data through Props, then the child component can only be read and cannot change that data. As a result, the Component can be used anywhere and will always display output if it has the same input value. This is what will help us control the Component more easily.

Using interface method 

Interface in Typescript allows you to define what properties and methods are needed by the object to be implemented. If the object conforms to the correct interface template, then the object that implements that interface will be properly implemented.

Here we will define the interface as a function we need to pass.

Code:

interface ChildFunction {
  concatenation: (a: string, b: string) => string;
}
 
function Parent({ concatenation }: ChildFunction) {
  return (
    <>
      <h2>How to pass Functions as Props in React TypeScript | LearnShareIT</h2>
      <h3>New String: {concatenation("Hello", "World!")}</h3>
    </>
  );
}
 
const App = () => {
  const concatenation = (a: string, b: string) => {
    return a + b;
  };
 
  return (
    <>
      <Parent concatenation={concatenation} />
    </>
  );
};
 
export default App;

Output:

By making an interface for the child component a function, we can pass it as Props easily and use it in the parent component in Typescript. Or you can refer to the following ways.

Using the typeof method

The typeof operator returns a string representing the data type of an evaluated value. Because we will use the typeof method to assign the Component its correct type, in the example below, we will use it to pass a handler function to input.

Code:

import { useState } from "react";
interface NumberProps {
  onSubmit?: (values: {
    number: number,
  }) => void;
}
const NumberForm = ({ onSubmit }: NumberProps) => {
  const [values, setValues] = useState({
    number: "",
  });
 
  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
    setValues((valueX) => ({
      ...valueX,
      [e.target.name]: e.target.value,
    }));
  };
  return (
    <form style={{ width: "200px" }}>
      <input
        type="text"
        name="number"
        value={values. number}
        onChange={handleChange}
      />
    </form>
  );
};

function App() {
  const handleSubmit: React.ComponentProps<typeof NumberForm>["onSubmit"] = (
    number
  ) => {
    console.log(number);
  };
 
  return (
    <div>
      <NumberForm onSubmit={handleSubmit} />
    </div>
  );
}
export default App;

This way, we can also pass functions as Props in React TypeScript. When declaring Component Props, we will use typeof to define Number Form. Hope you have success with the above methods.

Summary

To summarize, the article has told us how to pass functions as Props in React TypeScript, but we recommend you use interfaces. This solution is helpful for you. Let’s try it.

Maybe you are interested:

• Import Functions from another file in React
• how to only call a function once in react
• How to create a Delay function in React

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs