CODEWITHSUNDEEP
javascriptreactjsreact-hooksreact-propsreact-functional-component
Samriddha Bajpai
Samriddha Bajpai

Reputation: 64

Issue in ReactJs function calling between components

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;

Upvotes: 1

Views: 95

Answers (1)

Zahra Tavakoli
Zahra Tavakoli

Reputation: 96

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;

Upvotes: 1

Related Questions