Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to call functionA from functionB in React

I don’t have much experience with front-end development, so I will be really grateful for a simple solution in this case scenario:

functionA(value, name) {
   /*some code*/

   return (
     /*some code*/
   )
}

functionB() {
    /*some code*/
    //how to call functionA here?

}

const firstFunction = ReactDOM.createRoot(document.getElementById('firstFunction'));


firstFunction.render(
   <functionA 2 Alex />
)

Here, I have functionA and functionB, as well as getting an element from the HTML file by id and making it render the return value from functionA.

My question is, in this case, how can I call functionA from functionB? I understand that they should be in the same function together in order to do that, but then I encounter a problem with calling the needed functions in the .render().

Tags:

2

Answers


  1. 0

    render() will only render one React node at a time. In order to have both function rendered in the render() method, you should wrap them both into another React node. Hope this can help!

    Login or Signup to reply.
  2. 0

    In React, UI Components are defined as functions in your case functionA and functionB.

    First note, by convention components are named using PascalCase.

    So assuming both functionA and functionB are intented to be UI Components they will become function FunctionA() {} and function FunctionB {}

    If you are using React version < 18:

    you need to mount the components using ReactDOM library into a dom element, defined in an html file.

    const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <FunctionA />;
root.render(element);

    From here, you can compose components by either nesting them or rendering as siblings

    ...
const element = () => (
   <>
     <FunctionA />
     <FunctionB />
   </>
)

    const element = () => (
   <>
    <FunctionA>
      <FunctionB />
    </FunctionA>
   </>
)

    In this last example FunctionA can pass props to FunctionB to communicate between Parent and Child and FunctionB can send data up to the parent using callback props

    I invite you to read more in the react official docs about sharing state between components here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search