How to render element in React.js from object map

Question

I have a question about rendering components from object map. I have a structure like this:

const tabs = [
    'tab1': {
        name: 'Tab 1',
        renderComponent: () => <Tab1Component />
    },
    'tab2': {
        name: 'Tab 2',
        renderComponent: () => <Tab2Component />
    }
];

I want to access the renderComponent property and render sub component. Tried with function invocation, React.createElement(), doesn't work.

const MyComponent = ({tabs}) => {
    const activeTab = 'tab1';
    return (
        <>
        // How to render it?
        // function invocation?
        // createElement??
            tabs[activeTab].renderComponent();
        </>
    );
};

adding curly braces should do the trick: { tabs[activeTab].renderComponent() } — Patrick Hund
– Patrick Hund, Commented Feb 20, 2020 at 12:18
@PatrickHund I actually have written it like that, but forgot to add it to this mocked examples. Still it doesn't work. it says: tabs[activeTab].renderComponent is not a function — Shiny Diamond
– Shiny Diamond, Commented Feb 20, 2020 at 12:26
Yeah, I didn't spot the square brackets in the declaration of tabs, those should be curly. atadnmz's answer is correct. — Patrick Hund
– Patrick Hund, Commented Feb 20, 2020 at 13:27

atadnmz · Accepted Answer · 2020-02-20 12:42:37Z

1

Your array declaration is wrong. you should use object or array that includes objects. Try this block.

const tabs = {
  tab1: {
    name: "Tab 1",
    renderComponent: () => <Tab1Component />
  },
  tab2: {
    name: "Tab 2",
    renderComponent: () => <Tab2Component />
  }
};

Also surround your js code with {} like;

const MyComponent= () => {
  const activeTab = "tab1";
  return <>{tabs[activeTab].renderComponent()}</>;
};
export default MyComponent;

answered Feb 20, 2020 at 12:42

atadnmz

3112 silver badges14 bronze badges

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

Comments

Tinu Jos K · Accepted Answer · 2020-02-20 12:44:21Z

Here things i guess you did wrong is
1) adding the single quotes around the object-key
2) writing key-value pairs in array without enclosing it in {}

I think you should do something like this

const tabs = [
        {
            tab1: {
                name: 'Tab 1',
                renderComponent: () => <Tab1Component />
            },
            tab: {
                name: 'Tab 2',
                renderComponent: () => <Tab1Component />
            }
        }
    ];

    const activeTab = 'tab1';

and

const MyComponent = ({tabs}) => {
    const activeTab = 'tab1';
    return (
        <>
        // How to render it?
        // function invocation?
        // createElement??
            tabs[0][activeTab].renderComponent();
        </>
    );
};

pankaj kumar · Accepted Answer · 2020-02-20 13:16:40Z

0

const MyComponent = () => {

const activeTab = 'tab2';

const tabs = [
{'tab1': {
    name: 'Tab 1',
    renderComponent: () => <Tab1Component />
}},
{'tab2':{
    name: 'Tab 2',
    renderComponent: () => <Tab2Component />
}}

];

  return (
  <div>
    {tabs.map((el) => {
      if (el[activeTab]) {
        return el[activeTab].renderComponent()
      }
    })}
  </div>

); }

answered Feb 20, 2020 at 13:16

pankaj kumar

714 bronze badges

Collectives™ on Stack Overflow

How to render element in React.js from object map

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related