dot-notation-react-component

Using Dot Notation for Functional Components in React

For a cleaner way to manage your functional components, consider using dot notation. Here’s how you can do it:

1. Create an object that maps your components in a single file:

   import { Letter } from "./Letter";
   import { Timer } from "./Timer";
   
   export const Problem = {
     Letter: Letter,
     Timer: Timer,
   };

2. Then use this object in your main application file like this:

import { Problem } from "./components/Problem";

const App = () => (
  <main className="main">
    <Problem.Timer />
    <Problem.Letter />
  </main>
);

This approach simplifies your imports and keeps your code organized.