Call function from React component in other component

Question

Can you help me? I have two functional components and I need to use function from first component in second component. I want to use function "sayHello" in function onClicked, but I don't know how to do it.

import React from 'react';

type Props = {

}

const Component_1: React.FunctionComponent<Props> = () => {

  const sayHello = () => {

    console.log('----Hello');
    
  }
  
  return (
    <div className="">
      Component 1
    </div>
  );
};
    
export default React.memo(Component_1);


const Component_2: React.FunctionComponent<Props> = () => {

  const onClicked = () => {
    
    //How ???
    //Component_1.sayHello()

  }

  return (
    <div className="">
      
      <div onClick={onClicked}>
        Click me
      </div>

      <Component_1/>

    </div>
  );
};

Hi, Please look into the following link:- stackoverflow.com/questions/45262987/… This might resolve your issue. — Shwetank
– Shwetank, Commented Apr 28, 2022 at 16:24

Hamza Sehouli · Accepted Answer · 2022-04-28 17:55:08Z

2

const Component_1 = (props) => {
 const sayHello = () => {
  console.log("----Hello");
 };
 props.onClicked(sayHello);
 return <div className="">Component 1</div>;
};

const Component_2 = () => {
 let sayHello;
 const fn = function (sayHelloFromComp1) {
  sayHello = sayHelloFromComp1;
 };

 const onClicked = (e) => {
 //How ???
 //Component_1.sayHello()
 sayHello();
 };
 return (
  <div className="">
   <div onClick={onClicked}>Click me</div>
   <Component_1 onClicked={fn} />
  </div>
 );
};

export default Component_2;

answered Apr 28, 2022 at 17:55

Hamza Sehouli

2031 silver badge6 bronze badges

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

Collectives™ on Stack Overflow

Call function from React component in other component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related