title: React.js - How to Render a Component Based on its Object Value?
body: <p>I have multiple lists that I want to render by the same rules, except for the property 'component', where I need to render the component that is listed on each list:</p>
  <pre><code>const pokemon = [
    {
      &quot;number&quot;: 1,
      &quot;name&quot;: &quot;bulbasaur&quot;,
      &quot;url&quot;: &quot;https://pokeapi.co/api/v2/pokemon/1/&quot;
    },
    {
      &quot;number&quot;: 2,
      &quot;name&quot;: &quot;ivysaur&quot;,
      &quot;url&quot;: &quot;https://pokeapi.co/api/v2/pokemon/2/&quot;
    },
  ];
  
  const pokemonConfig = [
    {
      title: 'pokedex #',
      field: 'number'
    },
    {
      title: 'name',
      field: 'name',
      component: PokemonName
    }
  ];
  
  &lt;Grid config={pokemonConfig} data={pokemon} /&gt;
  
  const Grid = ({ config, data }) =&gt; (
    &lt;table&gt;
      &lt;thead&gt;
      &lt;tr&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;tr&gt;
        {config.map((c, i) =&gt; &lt;th key={i}&gt;{c.title}&lt;/th&gt;)}
      &lt;/tr&gt;
        {data.map((d, i) =&gt;
        &lt;tr key={i}&gt;{config.map((c, i) =&gt; c.hasOwnProperty('component') ?
  
          // the component and its data here...
  
          : &lt;td key={i}&gt;
            {d[c.field]}
            &lt;/td&gt;)
          }
        &lt;/tr&gt;)}
      &lt;/tbody&gt;
    &lt;/table&gt;
  );
  </code></pre>
  <p>What is the best practice to do so?</p>
  <p><strong>Thanks much!!</strong></p>