Export and Import Functions in React Component

Question

I'm creating a webapp that uses react. I have a main App.js file that serves as the main component. I then have a subcomponent that has functions that create buttons. For example, I have a renderLogoutButton() that contains a logo, text, etc.

I need the logout button in a different subcomponent and don't want to have to duplicate the function. How can I export the renderLogoutButton() from one React component and import it into another React component?

All help is appreciated; thanks in advance. :)

Answer 1

If you move your renderLogoutButton code to a seperate LogoutButton component, you can re-use the component wherever you want without code duplication.

This will also shrink the size and complexity of your App component, which is preferable.