title: ReactJS - Dynamically return components using names in a JSON
body: <p>I have implemented few components and I need to return it in another component by using the names in JSON.</p>
  <pre><code>import * as React from 'react';
  import ToggleButton from '@mui/material/ToggleButton';
  import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
  import AWSLogs from '../supportProviderTables/AWSLogs.js';
  import AnalyticsEvent from '../supportProviderTables/AnalyticsEvent.js';
  import Assignment from '../supportProviderLists/Assignment.js';
  import AllComponents from '../supportProviderTables';
  
  export default function ColorToggleButton() {
    const [alignment, setAlignment] = React.useState(null);
  
    const handleChange = (event, newAlignment) =&gt; {
      setAlignment(newAlignment);
    };
  
    const buttonSet = [
      {
          value:&quot;profiles&quot;,
          text: &quot;Profiles&quot;,
          components: [
              {text: &quot;Assignment&quot;},
              {text: &quot;AnalyticsEvent&quot;},
              {text: &quot;AWSLogs&quot;}
          ]
      }
    ];
    
    return (
        &lt;div&gt;
          &lt;ToggleButtonGroup
              color=&quot;primary&quot;
              value={alignment}
              onChange={handleChange}
          &gt;
              {buttonSet.map((item,i) =&gt; {
                  return &lt;ToggleButton value={item.value}&gt;{item.text}&lt;/ToggleButton&gt;
              })}
              
          &lt;/ToggleButtonGroup&gt;
          {alignment !== null ? alignment.map((item,i) =&gt; {
              return (buttonSet.map((ele,j) =&gt; {
                  if(item === ele.value){
                      return (ele.components.map(data =&gt; {
                          console.log(data.text);
                          const ComponentName = AllComponents[data.text];
                          return &lt;ComponentName /&gt;
                      }))
                  }
              }))
          }) : &lt;div&gt;&lt;/div&gt;}
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>The output is expected to return all the components relevant like below
  <a href="https://i.stack.imgur.com/a3RB6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a3RB6.png" alt="enter image description here" /></a>
  But it doesnot return the components and shows an error as &quot;AWSLogs is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter&quot; Can anyone help me to do this?</p>
  <p>C</p>