Conditionally rendering a component

Question

const TABS = [
  {
    component: Home,
    label: "Home",
    isActive: true
  },
  {
    component: About,
    label: "About",
    isActive: false
  },
  {
    component: Contact,
    label: "Contact",
    isActive: false
  }
];

...
render() {
  return (
    {TABS.map(({ component, isActive}) => isActive ? /* how do i do it? */ : "false" )}
  )
}

I'm unsure on how to render a component as whatever I do seems to result in an error. I'm new to React so any help is appreciated.

Thanks!

Answer 1

You can do like this:

render() {
  return (
    {TABS.map(({ component, isActive}) => isActive ? <component /> : null )}
  )
}