How to implement switching components on click on an element?

Question

React

In fact, I want to do the following:

There is a Sidebar in a separate component, depending on which element I clicked on in the Sidebar, different components in the parent component need to be loaded.

The idea of ​​implementation is as follows: When clicking on an element in the Sidebar, change the state and display different components in the parent component through the switch depending on the given state.

Is this a normal implementation option, or is there some other one that is preferable to use?

PS I'm just starting to learn React, if I wrote something wrong, please ask clarifying questions.

Answer 1

The normal decision - if it solves your task. All sorts of best practices and other things are already for those who begin to feel a lack of knowledge after a year or two.
More or less like this

const TopNavigation: FC = () => {
  const { opened, setOpened } = useData()
  const { state: cityState } = useCityState()
  const { dispatch } = useNavigationDispatch()
  const { state: navigationState } = useNavigationState()
  const navRef = useRef(null)

  useEffect(() => {
    dispatch({ type: 'setTopNavHeight', payload: { topNavHeight: navRef.current.offsetHeight } })
  }, [])

  return (
    <Navigation
      size='tiny'
      fixed
      dispatch={dispatch}
      transparent={navigationState.transparent}
      borderBottom='white'
      backgroundColor={navigationState.transparent ? 'transparent' : 'slightlyGray'}
    >
      <Layout justifyContent='center'>
        <Box
          maxWidth={['90%', '90%', '1200px']}
          width='100%'
          height='48px'
          ref={navRef}
          alignSelf='center'
          alignItems='center'
        >
          <CityPinIcon
            color={navigationState.transparent ? 'white' : ''}
            width='10px'
            height='13px'
          />
          <Layout flexBasis='8px' />
          <Text
            fontSize='small'
            lineHeight='normal'
            color={navigationState.transparent ? 'white' : 'dustyGray'}
            cursor='pointer'
            onClick={() => setOpened(true)}
          >
            {cityState.city.name}
          </Text>
          <Layout flexGrow={1} />
          <TopBarList />
        </Box>
      </Layout>
      <CityModal onClose={() => setOpened(false)} opened={opened} />
    </Navigation>
  )
}

export default TopNavigation