What is a switching component?
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,};
January 11, 2022
425
Read more
What is React?
November 06, 2022
ReactJSHow to programmatically trigger click event in React?
November 06, 2022
ReactJS