Access a function from a Component in another Component in React-CodePudding

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!!

CodePudding user response：

You will want to pass the function as a prop to the child component. You can't or I should say shouldn't pass a prop to a parent, you can do this but is not a react way and never recommended. What you would do in this case is but the logic in the parent because both siblings are needing access to it.

const App = () => {
    const clickHandler = () => {
        alert("Click event")
    }
 return (
    <div className="App">
        <ChildOne clickHandler={clickHandler}/>
        <ChildTwo clickHandler={clickHandler}/>
    </div>
 )
}

}

CodePudding user response：

You can either pass it down from a parent component, shown below, or you can use a custom hook

Parent Component:

import Child from './Child.js'
export default function Parent() {
  
  const functionToBePassed = () => { ... }

  return (
    <Child func={functionToBePassed}>
  )
}

Or you can do it via a custom hook

Two files, first one is the hook

export default function useFunc() {
  const functionToBeShared = () => {...}

  return { functionToBeShared }
}

//this is any component that wants to use the hook
import useFunc from ./useFunc;
export default function ComponentThatUsesHook() {
  const {functionToBeShared} = useFunc();
}

CodePudding user response：

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