React how to render multiple elements in one JSX element?

Question

React

I have a functional theme component that is a theme provider (AppThemeProvider) and a separate AppThemeButton component to change the theme. It is possible to place these 2 components in one (AppTheme) so that when writing AppTheme.Provider, the theme provider is returned, and when writing AppTheme.Button, the theme change button. It is desirable that this component be functional, not class-based.

Answer 1

AppTheme.js:

import AppThemeProvider from './AppThemeProvider.jsx';
import AppThemeButton from './AppThemeButton.jsx';

export default {
  Button: AppThemeButton,
  Provider: AppThemeProvider
}

Yes, this is normal javascript, it has nothing to do with react.