How to type async function passed as prop to React component

codedude

How should I type an async function that I'm passing to my React component as a property?

My component is defined below. Specifically I don't know how to type the addTask property in my interface:

interface INewTaskEntryProps {
    addTask:any; // this 
}
class NewTaskEntry extends React.Component<INewTaskEntryProps> {
    ...
    render() { 
        return (
            ...
            <button onClick={(e) => this.props.addTask(e)}>Do Something</button>
            ...
        );
    }
}

And my async function is defined like so:

const addTask = async (e) => {
    ...
    try {
        const newID = await mongoTaskCollection.insertOne({
            ...
        });
    }
    ...
}

And finally I pass the async function into my component like so:

<NewTaskEntry addTask={addTask} />
Milton

Depending on what addTask returns but can be something like this:

interface INewTaskEntryProps {
  addTask: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void; 
}

In this case you are telling addTask returns void.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to ensure that function passed as prop to Vue component is async?

React - How to pass props to a component passed as prop

React component throwing TypeScript error for function passed in as prop

react function undefined when passed to functional component as a prop

How to pass a function as a prop to React function component?

How to type link prop in component (React + TypeScript)?

In React, how do I render a stateless component that is passed in as a prop?

How to evaluate the passed prop to the styled component using react and typescript?

How to change the value of a prop of Sub Component passed as a column to React Table?

How to NOT render/ hide a React component when no prop is passed?

Jest + Enzyme test: how to ensure a certain function is passed as prop to a component

How to check if a component prop is a function in React?

How to pass function as prop to component in React

How to set a type for a React Compnent being passed in as a prop

React state passed as prop to child component not showing

React Hooks - function inside function component passed as prop can't access state

How to add an onClick event on a React Component that is passed down to another component as a prop

How Can I extend a React functional Component Prop Type?

How to get type of one specific prop of a react component?

How to type React Hook Form control prop in reusable component?

Styled Components - How to style a component passed as a prop?

React native navigation prop not being passed to the function

React: function passed as a prop not working correctly

How to get a return value from a React component function prop?

How to pass React Component prop to child function using {children}?

How to render a function im passing down as a prop to a child component in React?

Typescript: Assign prop type to component prop in a custom component in React Native

How should I test that every React component has been passed a given prop?

React prop cannot be passed into a functional component: "objects are not valid as a React child"