Refresh a functional component from another one

Viewed 1273

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?

3 Answers

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.

Why do you want to re-render it? If you pass props to a component it will automatically re-render if those props changes.

You can rerender a component by changing the key attribute value. every time the key is changed React unmount and mount the component.

Related