How does a component determine which environment (project) it is in and which business logic to use?

The component usually learns about the environment (project) it operates in through configuration passed from above — for example, via props, context, or global environment variables. This could be an environment variable (e.g., process.env.PROJECT_ENV), a configuration file, or parameters passed from a parent component.

Based on this information, the component selects the necessary business logic, for example, through conditional statements or a strategy pattern. This allows the same component to be used in different projects with different logic.

Example in React using context:

const ProjectContext = React.createContext('default');

function MyComponent() {
  const project = React.useContext(ProjectContext);

  if (project === 'projectA') {
    // logic for project A
  } else if (project === 'projectB') {
    // logic for project B
  }

  return <div>Component for {project}</div>;
}

// In the parent component
<ProjectContext.Provider value="projectA">
  <MyComponent />
</ProjectContext.Provider>

Thus, the environment is set from above, and the component adapts to it.