How do I implement conditional rendering in a functional React component?

Question

I want to implement conditional rendering in a functional React component. I don't know how to do this in a function.

I need the corresponding imported component to be rendered depending on the state.

I wrote this logic using the ternary operator and everything works, but this code is terrible and unreadable.

import React, { useState, useEffect } from "react";

import Header from "./header/header";
import Footer from "./footer/footer";

// One of these components will be rendered between Header and Footer ↓
// Name of the component in the state (activeItem)

import Landing from "./landing/landing";
import BookingManagement from "./bookingManagement/BookingManagement";
import BookingTickets from "./bookingTickets/bookingTickets";
import EnterProfile from "./enterProfile/enterProfile";
import PersonalArea from "./personalArea/personalArea";
import Register from "./register/register";
import SearchResults from "./searchResults/searchResults";
import ChoosePlace from "./choosePlace/choosePlace";

function App() {
  const [activeItem, setActiveItem] = useState("landing");

  useEffect(() => {
    console.log(activeItem);
  });

  return (
    <>
      <Header changeMain={setActiveItem} />
      {activeItem == "landing" ? <Landing changeMain={setActiveItem} /> : <></>}

      {activeItem == "bookingManagement" ? <BookingManagement /> : <></>}
      {activeItem == "bookingTickets" ? <BookingTickets /> : <></>}
      {activeItem == "enterProfile" ? <EnterProfile /> : <></>}
      {activeItem == "personalArea" ? <PersonalArea /> : <></>}
      {activeItem == "register" ? <Register /> : <></>}
      {activeItem == "searchResults" ? <SearchResults /> : <></>}

      {activeItem == "choosePlace" ? <ChoosePlace /> : <></>}

      <Footer changeMain={setActiveItem} />
    </>
  );
}

export default App;

I definitely need to implement this in the functional component, because I use hooks.

Why not a map of strings to components?

Dave Newton
– Dave Newton

2021-11-28 19:34:17 +00:00
Commented Nov 28, 2021 at 19:34 — Dave Newton
– Dave Newton, Commented Nov 28, 2021 at 19:34
Looks like you might be looking for React Router

pilchard
– pilchard

2021-11-28 19:37:38 +00:00
Commented Nov 28, 2021 at 19:37 — pilchard
– pilchard, Commented Nov 28, 2021 at 19:37

Gabriele Petrioli · Accepted Answer · 2021-11-28 19:46:47Z

3

How about

const ComponentMap = {
  landing: Landing,
  bookingManagement: BookingManagement,
  bookingTickets: BookingTickets,
  enterProfile: EnterProfile,
  personalArea: PersonalArea,
  register: Register,
  searchResults: SearchResults,
  choosePlace: ChoosePlace
};

function App() {
  const [activeItem, setActiveItem] = useState("landing");

  useEffect(() => {
    console.log(activeItem);
  });

  const ActiveComponent = ComponentMap[activeItem] || React.Fragment;
  const ActiveComponentProps = {};
  if (activeItem === "landing") {
    ActiveComponentProps.changeMain = setActiveItem;
  }
  
  return (
    <>
      <Header changeMain={setActiveItem} />
      <ActiveComponent {...ActiveComponentProps} />
      <Footer changeMain={setActiveItem} />
    </>
  );
}

answered Nov 28, 2021 at 19:46

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

Comments

Ruben Lemiengre · Accepted Answer · 2021-11-28 20:22:14Z

You can create an object which wraps all your components and then use the correct component by using activeItem as the key:

    import React, {useState, useEffect} from 'react';

    import Header from './header/header';
    import Footer from './footer/footer';

    import Landing from './landing/landing';
    import BookingManagement from './bookingManagement/BookingManagement';
    import BookingTickets from './bookingTickets/bookingTickets';
    import EnterProfile from './enterProfile/enterProfile';
    import PersonalArea from './personalArea/personalArea';
    import Register from './register/register';
    import SearchResults from './searchResults/searchResults';
    import ChoosePlace from './choosePlace/choosePlace';

    const components = { Landing, BookingManagement, BookingTickets, EnterProfile, PersonalArea, Register, SearchResults, ChoosePlace };

    export default function App() {
      const [activeItem, setActiveItem] = useState("Landing");
      const ActiveItemComponent = components[activeItem];

      return (
        <>
          <Header changeMain={setActiveItem} />
          <ActiveItemComponent />
          <Footer changeMain={setActiveItem} />
        </>
      );
    }

Dave Newton · Accepted Answer · 2021-11-28 19:58:34Z

1

you can go with react-router implementation. Or if you want to handle the same in this component you can do similar like below

const getComponent = () => {
  if (condition1) {
    return <Component1/>
  } else if (condition2) {
    return <Component2/>
  }
 
  return <DefaultComponent/>
}

and inside the render return you can call that function like below

return (
  {getComponent()}
)

edited Nov 28, 2021 at 19:58

Dave Newton

161k27 gold badges263 silver badges310 bronze badges

answered Nov 28, 2021 at 19:46

Sathish Thangaraj

1741 silver badge9 bronze badges

Comments

Martin · Accepted Answer · 2021-11-28 20:00:29Z

1

instead of

{(activeItem=='landing' ? (
    <Landing changeMain={setActiveItem}/>
  ) : (
    <></>
  ))}

go with

{activeItem=='landing' && (
    <Landing changeMain={setActiveItem}/>
)}

edited Nov 28, 2021 at 20:00

Martin

2,4221 gold badge14 silver badges23 bronze badges

answered Nov 28, 2021 at 19:45

Rastislav Uhrin

1702 silver badges9 bronze badges

2 Comments

Martin Over a year ago

While this omits the need of the : (else) part of the ternary operator's conditional rendering, it hardly fixes the core issue, which is repeated statements. It's much cleaner to simply have a map of the components and have the activeItem be the index to decide which component to render.

Rastislav Uhrin Over a year ago

You are right! thank you for the remark 🙏

Chris · Accepted Answer · 2021-11-29 00:56:11Z

1

function App() {
    
    const [activeItem, setActiveItem] = useState('landing');
    
    const itemToComponent = [
      landing: {component: Landing},
      bookingManagement: {component: BookingManagement},
      ...
    ]
    const Components = itemToComponent[activeItem].component
    
  return (
    
      {<Components />}
          <Footer changeMain={setActiveItem}/>
       </>
  );
}

export default App;

edited Nov 29, 2021 at 0:56

Chris

139k139 gold badges316 silver badges293 bronze badges

answered Nov 28, 2021 at 20:12

Li 1001

759 bronze badges

1 Comment

Chris Over a year ago

Welcome to Stack Overflow. Code is a lot more helpful when it is accompanied by an explanation. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please edit your question and explain how it answers the specific question being asked. See How to Answer.

Collectives™ on Stack Overflow

How do I implement conditional rendering in a functional React component?

5 Answers 5

Comments

Comments

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related