Refresh a functional component from another one

Question

I have three files: App.js, A.js and B.js. A and B are functional components which are used in App.js. Within A.js I have a function foo(), and within this function I want to force B.js to re-render.

Any idea how to do this?

I googled this problem and found out that I could set a state in B.js and update that state. But how can I update this external state from foo() in A.js?

Answer 1

Have a state in your App, then pass its state to B and setState function to A as props. Then whenever, you update the state through setState function from component A, it will cause to re-render the component B. It happens becuase react trigger re-rendering whenever props update.