How to use functions from another component in React Typescript

Question

I have two components, one for API and another for UI. I am trying to access a function from API Component in UI component like below,

import APIComponent "./APIComponent";
APIComponent.getData().(response:any) => { //showing error here as "Property 'getData' does not exist on type '{ APIComponent: () => any; }'"
    console.log(response);
  })

Below is my APIComponent,

const APIComponent=():any=>{
const getData=():any =>{
//forming request
}
}

Thanks in Advance.

Yaya · Accepted Answer · 2021-09-02 18:38:45Z

1

You should export them first, without an default export, so that would be

export const APIComponent=():any=>{}
export const getData=():any =>{}

Then try to import them

import {getData} "./APIComponent";

or try to export default and object and in that object add the functions as methods like so

export const APIComponent = () => {};
const getData = () => {
  alert("Getting the data");
};
export default {
  getData
};

Then you can actually export them and import them without the Destructure Syntax

import APIComponent from "./APIComponent"

   APIComponent.getData();

Have a look at this Sandbox https://codesandbox.io/s/morning-feather-9z24o?file=/src/App.js

edited Sep 2, 2021 at 18:38

answered Sep 2, 2021 at 18:19

Yaya

4,9165 gold badges28 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use functions from another component in React Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related