0

I have three components: ComponentA, ComponentB and Home (Home is the component parent). I want to call a function contains in ComponentA using a button that is inside of ComponentB.

const ComponentA= () => {
  const hello=()=>{
    console.log("hello");
  }
  return <></>
})

const ComponentB= () => {
  const callComponentAFunction=()=>{
   // I need call "hello()" from ComponentA
  }
  return 
   <>
    <button onClick={callComponentAFunction}>Call function from ComponentA</button>
   </>
})

const Home= () => {
 return 
  (<>
   <ComponentA>
     <ComponentB />
   </ComponentA>
   </>)
 })

How can I call hello() function (inside of ComponentA) from ComponentB?

isherwood
  • 58,414
  • 16
  • 114
  • 157
yavgz
  • 275
  • 3
  • 17
  • Also: [How can I call parent method in a child React component?](https://stackoverflow.com/questions/40109698/react-call-parent-method-in-child-component/40109797) – isherwood Dec 10 '21 at 21:55
  • @isherwood please reconsider opening my question. In my scenario I have 3 components. I am a bit confused with the answers you posted. i am new to react. – yavgz Dec 10 '21 at 21:57
  • This scenario is well documented and fundamental to React. It doesn't warrant another question on SO. Good luck. – isherwood Dec 10 '21 at 21:59
  • Have you done the [React tutorial](https://reactjs.org/tutorial/tutorial.html)? It lays things out quite well. You may want to "lift the state" to the parent component instead. – isherwood Dec 10 '21 at 22:01

0 Answers0