Problem:- I have written a function named "getData()" in "App.js" and i am able to call it in "User.js". Code is written below.
But, What if i have written that "getdata()" function in "User.js" and i have to call it in "App.js". How can i do that? i am not able to do so.. please guide me.
App.js
import User from './User'
function App() {
function getData() {
alert("Hello from app component")
}
return (
<div className="App">
<User data={getData}/>
</div>
);
}
export default App:
User.js
function User(props) {
return(
<div>
<h1>User Component</h1>
<button onClick={props.data}> Call Function</button>
</div>
export default User;
App.js
import React, { useRef } from 'react';
import User from './User';
function App() {
const childRef = useRef();
return (
<div className="App">
<User ref={childRef} />
<button onClick={() => childRef.current.getData()}>Call Function</button>
</div>
);
}
export default App;
User.js
import React, { forwardRef, useImperativeHandle } from 'react';
const User = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
getData() {
alert('Hello from user component');
},
}));
return (
<div>
<h1>User Component</h1>
</div>
);
});
export default User;