ReactJS - Dynamically return components using names in a JSON

Question

I have implemented few components and I need to return it in another component by using the names in JSON.

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) => {
    setAlignment(newAlignment);
  };

  const buttonSet = [
    {
        value:"profiles",
        text: "Profiles",
        components: [
            {text: "Assignment"},
            {text: "AnalyticsEvent"},
            {text: "AWSLogs"}
        ]
    }
  ];
  
  return (
      <div>
        <ToggleButtonGroup
            color="primary"
            value={alignment}
            onChange={handleChange}
        >
            {buttonSet.map((item,i) => {
                return <ToggleButton value={item.value}>{item.text}</ToggleButton>
            })}
            
        </ToggleButtonGroup>
        {alignment !== null ? alignment.map((item,i) => {
            return (buttonSet.map((ele,j) => {
                if(item === ele.value){
                    return (ele.components.map(data => {
                        console.log(data.text);
                        const ComponentName = AllComponents[data.text];
                        return <ComponentName />
                    }))
                }
            }))
        }) : <div></div>}
    </div>
  );
}

The output is expected to return all the components relevant like below But it doesnot return the components and shows an error as "AWSLogs is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter" Can anyone help me to do this?

C

Share the content of ../supportProviderTables/AWSLogs.js. It should export AWSLogs as default. — Aman
– Aman, Commented Mar 22, 2022 at 16:18

LoXatoR · Accepted Answer · 2022-03-22 16:32:23Z

1

You can't simply export a string and expect React to know that it's a component. The bare minimum is that you have to create a key-value pair, where you manually map each string to the component you want to return.

const components = {
'A':<A/>,
'B': <B/>,
'C': <C/>,
}

So, then when you get the ComponentName in your component, you can return it like

return components[ComponentName], which will return the respective React component.

answered Mar 22, 2022 at 16:32

LoXatoR

6237 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJS - Dynamically return components using names in a JSON

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related