I need to call function in child component from another child-CodePudding

import ChildOne from '../ChildOne';
import ChildTwo from '../Toolbar/ChildTwo';

const ParentComp = () => {
 return <div className="root">
  <ChildOne/>
  <ChildTwo/>
</div>;
}

ChildOne

const ChildOne = (props) => {
const CallHere= useMemo(() => {
 return (
  <div className='pageinfo'>
content
</div>
);
},[couple of dependency]);
return (
        <>
         {CallHere}
        </>
}

ChildTwo

for some reason i need to return the CallHere in ChildTwo instead of returning in Child one, but i need all the code to be in childOne only, because there is a lots of dependency. And also i cannot any code from childOne to parent component.

const ChildTwo= (props) => {
return (
        <>
         {CallHere}
        </>
}

Is there anyway, i can use the retuned JSX in child two instead of Child one.

CodePudding user response：

Yes, you can pass the JSX that you want to render in ChildTwo as a prop to ChildTwo from ChildOne. This way, you can keep all of the code that generates the JSX in ChildOne, but still be able to render it in ChildTwo.

const ChildOne = (props) => {
  const CallHere = useMemo(() => {
    return (
      <div className='pageinfo'>
        content
      </div>
    );
  }, [couple of dependency]);

  return <ChildTwo callHere={CallHere} />;
}

const ChildTwo = (props) => {
  return (
    <>
      {props.callHere}
    </>
  );
}

In this example, ChildOne passes the CallHere JSX as a prop called callHere to ChildTwo. ChildTwo then renders the callHere prop.

CodePudding user response：

Yes, you can pass the JSX that you want to render in ChildTwo as a prop to ChildTwo from ChildOne. This way, you can keep all of the code that generates the JSX in ChildOne, but still be able to render it in ChildTwo.