How to pass parameters in react functions with Typescript

Question

Here is the structure of my folder:

 src--|

 |--ComponentsFolder1--Button.tsx

 |--ComponentsFolder2--ParentDiv.tsx

My problem is as follows: Button.tsx is a react component which calls a fetch function located in react ParentDiv.tsx with a few parameters:

type getNewVerseProps = {
   getNewVerseFunc: (event: React.MouseEvent<HTMLDivElement>) => string;
};

const Button = ({ getNewVerseFunc }: getNewVerseProps) => {
   return (
      <div>
               <div
                  onClick={getNewVerseFunc.bind(name, id)}>
               </div>
      </div>

Now, as you can see, I want to call the function on my ParentDiv.tsx file with the specified parameters in Button.tsx:

    const getNewVerseFunc = async (name: string, id: string) => {
      const requ = await fetch(
         `https://api.scripture.api.bible/${name}/${id}`,
         {
            method: "GET",
            headers: {
               "api-key": bibleApi,
            },
         }
   };

<Button getNewVerseFunc={getNewVerseFunc}/>

My problem is that the params in the function are not being passed down in the Button component when i call the getNewVerseFunc function in the ParentDiv component

Yuriy Yakym · Accepted Answer · 2024-02-26 18:47:05Z

4

First of all you've used bind wrongly. First argument is a context, which is in this case ignored, because you have an arrow function, which is instantly bound; but it is impossible to rebind bound function.

Common practice is to have button with onClick callback, like:

import { FunctionComponent } from 'react';

type Props = {
  onClick: MouseEventHandler;
}

const Button: FunctionComponent<Props> = ({ onClick, children }) => (
    <div onClick={onClick}>
        {children}
    </div>
);

And for simplicity avoid using bind, call or apply if possible; it's good that you are aware of these functions, but using them usually reduces readability.

Then in parent you can do the following:

import { FunctionComponent } from 'react';

const ParentDiv: FunctionComponent = () => {
    const name = 'Some name';
    const id = 'Some id';

    return (
        <Button onClick={() => getNewVerseFunc(name, id)}>
            Click me
        </Button>
    );
};

If your Button component is wrapped with memo, then it makes sense to use useCallback hook for onClick handler, but that's already micro optimisation.

edited Feb 26, 2024 at 18:47

answered Jun 24, 2021 at 1:06

Yuriy Yakym

3,96621 silver badges33 bronze badges

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

3 Comments

D. R. Over a year ago

Thank you very much for your response, it really helped! I appreciate it!

Valentin Over a year ago

@D.R. You should consider accepting this answer to your question if it helped.

MSH Over a year ago

I think you forgot = in type Props = { onClick: MouseEventHandler; }

Collectives™ on Stack Overflow

How to pass parameters in react functions with Typescript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related