this seems like a duplicate question but it is not, the examples I have seen explain how to pass a function through props.

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

import "./styles.css";
import ComponentA from "./componentA";
import ComponentB from "./componentB";

export default function App() {
  return (
    <div className="App">
      <>
        <ComponentA>
          <ComponentB />
        </ComponentA>
      </>
    </div>
  );
}

const ComponentA = ({ children }) => {
  const hello = () => {
    alert("hello");
  //In my real scenario, this method contains a big logic...
  };
  return (
    <>
      Component A<div>{children}</div>
    </>
  );
};

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

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

this is my live code

CodePudding user response：

You can achieve that in many ways. Pass that function as props from component A.

Working example Modified code

//App.js
import "./styles.css";
import ComponentA from "./componentA";
// import ComponentB from "./componentB";

export default function App() {
  return (
    <div className="App">
      <>
        <ComponentA />
      </>
    </div>
  );
}


//Component A
import ComponentB from "./componentB";

const ComponentA = ({ children }) => {
  const hello = () => {
    alert("hello");
  };
  return (
    <>
      Component A<div>{children}</div>
      <ComponentB hello={hello} />
    </>
  );
};

export default ComponentA;

//Component B
const ComponentB = ({ hello }) => {
  return (
    <>
      <button onClick={hello}>Call function from ComponentA</button>
    </>
  );
};

export default ComponentB;

CodePudding user response：

you can also use the React.Children.map, the example like this: https://codesandbox.io/s/hardcore-ellis-ksgkd?file=/src/componentB.js