Access a function from a Component in another Component in React

Question

I am totally blank on how to use a function that is inside a component and needs to be used in another component.

Here is a simple program:

Test.js

export default function Test(){
  const testFunc = () => {
   console.log("it is working")
}
return(
  <div>
   Hi
</div>
)
}

Test2.js

export default function Test2(){
  
return(
  <button onClick={}> // Here I want to use testFunc() from Test file
   Click
</button>
)
}

Could someone please explain how can it be achieved to access the function in Test2 file. Thanks in advance!!

Answer 1

Welcome to the React community.

To use a function that is inside a component and needs to be used in another component.

You need a common parent, that handles the function.

Let's say you have the following structure.

export const ParentComponent = () => {
    return <>
        <Test1 />
        <Test2 />
    <>
}

If you want some function in Test1 to affect Test2, then you do what in react is called lifting state up https://reactjs.org/docs/lifting-state-up.html

ParentComponent

export const ParentComponent = () => {
    const [value, setValue] = useState('')
    return <>
        <Test1 setValue={setValue} />
        <Test2 value={value} />
    <>
}

Test1

export const Test1 = (props) => {
    return <>
        <input onChange={(e) => props.setValue(e.target.vale} />
    <>
}

Test2

export const Test2 = (props) => {
    return <p>{props.value}</p> 
}

When a component renders another component, it is called the parent of the rendered child. Imagine React as a tree data structure where the App.tsx/jsx will be the tree's root.

Inspecting the code above, we can see that we have a function held in the parent. This is the function you would probably consider putting in Test1. However, if you need to use it in another component, that is not a child of the current element. You will need to find the nearest common parent and pass the functionality down like in the example above.

I hope it makes sense. If not, I recommend glancing at the Main Concepts part of the official React documentation. https://reactjs.org/docs/getting-started.html

Answer 2

As Konrad said in the comments, this can't be possible since these 2 components lack no relationship (Neither Components are rendering or calling each other within)

Something you could do is Render the Test2.js component within Test.js and add a callback like so:

Test.js

import Test2 from '...';

export default function Test(){
  const testFunc = () => {
   console.log("it is working")
}


return(
  <div>
   Hi
   <Test2 callbackProp={testFunc} />
</div>
)
}

Test2.js

export default function Test2({callbackProp}){
  
return(
  <button onClick={() => {callbackProp();} }> // Here I want to use testFunc() from Test file
   Click
</button>
)
}

Now whenever Test.js is rendered, it will also render Test2 (Since Test is rendering a Test2 Component) but whenever you click the button within Test2, it will execute the callback which is a function passed from Test

Nonetheless though, it's impossible to call any functions from another Component without passing down a prop like this (for future reference)