0 votes
in ReactJS by
What is a switching component?

1 Answer

0 votes
by

A switching component is a component that renders one of many components. We need to use object to map prop values to components.

For example, a switching component to display different pages based on page prop:

import HomePage from './HomePage'

import AboutPage from './AboutPage'

import ServicesPage from './ServicesPage'

import ContactPage from './ContactPage'

const PAGES = {

  home: HomePage,

  about: AboutPage,

  services: ServicesPage,

  contact: ContactPage

}

const Page = (props) => {

  const Handler = PAGES[props.page] || ContactPage

  return <Handler {...props} />

}

// The keys of the PAGES object can be used in the prop types to catch dev-time errors.

Page.propTypes = {

  page: PropTypes.oneOf(Object.keys(PAGES)).isRequired

}

Related questions

+1 vote
asked May 10, 2021 in Linux by rajeshsharma
0 votes
asked Nov 1, 2023 in ReactJS by AdilsonLima
...