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?
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.
You can rerender a component by changing the key attribute value. every time the key is changed React unmount and mount the component.
Why do you want to re-render it? If you pass props to a component it will automatically re-render if those props changes.