title: How to refactor a react component that is handling too many conditions / use cases?
body: <p>I'd like to apply SOLID principles with a react component that's handling too many 'use cases'. As an example let's say I have a component that's main responsibility is to render a table like so:</p>
  <pre><code>return (
     &lt;Table dataSource=&quot;&quot; name={tableName} /&gt;
  )
  </code></pre>
  <p>This is a very simplistic representation of that table. But the main point of complexity is the prop <code>dataSource</code>. Inside this <code>&lt;Table&gt;</code> component, I actually have a lot of logic/if-else condition that's catering for the <code>dataSource</code> flag littered within the component because the <code>dataSource</code> can take in many different shapes / object structure. Some are very similar that they can be abstracted, while some are quite specific (and may even just differ by one key).</p>
  <p>For example:</p>
  <pre><code>const tableName = `${
      dataSource === 'dataSourceA'
          ? dataSourceName
          : dataSourceName.name
  }`;
  </code></pre>
  <p>This is just one example. Imagine some <code>dataSource</code> has its <code>name</code> property nested 3 levels deep. Then other <code>dataSource</code> will even have different names for the keys (although the resulting data that I need to render are actually the same). Not only that, depending on the <code>dataSource</code>, I may need to call a different endpoints to execute some functionalities (again, the function is doing the same purpose, just the endpoint can be different). Hence within the same component I'll have a function like:</p>
  <pre><code>const exportTable = () =&gt; {
      if(dataSource === 'dataSourceA') {
          // use endpoint A
      } else if (dataSource=== 'dataSourceB') {
          // use endpoint B
      } else {
           // use endpoint C
      }
  }
  </code></pre>
  <p>What is the best way to refactor this kind of component and make it easier to maintain? Later on, we can have 10 types of <code>dataSources</code> and I can't be doing if-else conditions within the component to cater for their differences.</p>