Implementing conditional rendering with styled-components

Question

Implementing conditional rendering with styled-components

Currently, I am working on a menu that consists of a list of MenuItem components:

          <MenuItem>A</MenuItem>
          <MenuItem>B</MenuItem>
          <MenuItem>C</MenuItem>

I am looking to customize the component to be visible only when a boolean (such as `isLoggedIn`) is true. Is there a way to achieve this without manually adding a condition to each of the menu items, especially since I have a large number of them?

const PrivateMenuItem = styled.MenuItem` \\what to write here `;

          <PrivateMenuItem>A</PrivateMenuItem>
          <PrivateMenuItem>B</PrivateMenuItem>
          <PrivateMenuItem>C</PrivateMenuItem>

html css reactjs

Answer 1

Answer №1

One way to address this is by creating a component to handle it for you:

const CustomMenuItem = ({show=true, children}) => {
  return show ? <MenuItem>{children}</MenuItem> : null;
}

If you prefer to hide it using styling, you can modify the component like this:

const CustomMenuItem = ({show=true, children}) => {
  return show ? 
          <MenuItem className={styles.show}>{children}</MenuItem> :
          <MenuItem className={styles.hide}>{children}</MenuItem>;
}

Then, you can use it as follows:

<CustomMenuItem show={true}>A</CustomMenuItem>
<CustomMenuItem show={false}>B</CustomMenuItem>

Answer 2

One way to address this is by creating a component to handle it for you:

const CustomMenuItem = ({show=true, children}) => {
  return show ? <MenuItem>{children}</MenuItem> : null;
}

If you prefer to hide it using styling, you can modify the component like this:

const CustomMenuItem = ({show=true, children}) => {
  return show ? 
          <MenuItem className={styles.show}>{children}</MenuItem> :
          <MenuItem className={styles.hide}>{children}</MenuItem>;
}

Then, you can use it as follows:

<CustomMenuItem show={true}>A</CustomMenuItem>
<CustomMenuItem show={false}>B</CustomMenuItem>

Implementing conditional rendering with styled-components

Answer №1

Similar questions

Adjusting runtime environment variables for a React application

Styling elements with CSS

Next.js is failing to infer types from getServerSideProps to NextPage

Ways to emphasize the current tab on the site's navigation bar?

Error: The function "utils.useControlled" was not caught as a TypeError

"Troubleshooting: Why isn't the nested array in UseState updating and rendering correctly within a JavaScript file in

Using Typescript to Declare Function and React Component Types

Is it best practice to display a DIV once it is no longer visible after scrolling down?

"Customize your map pins on Google Maps by updating the marker location through a

Display the personalized list of user items on the MERN dashboard

Error: Unable to locate image module in REACT

What is the best way to shift a link to the right within a "div" element?

Is there a way to sequentially load two iframes, with the second one loading only after the first one is fully loaded

How can I show the table row as an inner table row when the first field is identical?

I'm encountering an issue with Firebase integration in my Next.js project

Implementing a transition effect to the drawimage function

Encountering issue when deploying multiple HTML files using Parcel

Difficulty encountered in setting the width of a sticky bottom element to be located at the bottom of the page with Tailwind

Showing hierarchical objects retrieved from JSON response

Encountering an error while attempting to import a module with an alias specified in the