cinextech
  • Home
  • Technology
    • AI
    • ChatGPT
    • Blockchain
    • Metaverse
    • technology-news
  • Business
  • Health
    • quotes
    • Insurance
  • Programing
    • Javascript
    • React
  • Cloud Computing
  • How-To
  • Write for us
  • Blog
No Result
View All Result
cinextech
  • Home
  • Technology
    • AI
    • ChatGPT
    • Blockchain
    • Metaverse
    • technology-news
  • Business
  • Health
    • quotes
    • Insurance
  • Programing
    • Javascript
    • React
  • Cloud Computing
  • How-To
  • Write for us
  • Blog
No Result
View All Result
cinextech
No Result
View All Result
Home React

Stop Using && operator for Conditional Rendering in React

Admin by Admin
May 24, 2023
in React
0
&& operator in javaScript
Share on FacebookShare on Twitter
play icon Listen to this article

React is a very popular JavaScript front-end framework that helps you to create SPA apps and user interfaces.

Most of the developers can’t use && operator correctly. It will easily lead to UI rendering errors. In 2023 we need to know about:

Table of Contents

    • You might also like
    • useCallback vs useEffect: What is the main difference between them?
    • Fix React Router URL’s issue with HashRouter
  • 1. React UI error caused by && operator
  • 2. What we should use instead of && operator?
      • 2.1 Use  !!usersList.length 
      • 2.2 Use  !!usersList.usersList.length >= 1
      • 2.3 Using ternary expressions

You might also like

useCallback vs useEffect: What is the main difference between them?

useCallback vs useEffect: What is the main difference between them?

May 8, 2023
Fix React Router URL's issue with HashRouter

Fix React Router URL’s issue with HashRouter

May 6, 2023
  1. React UI error caused by && operator
  2. What we should use instead of && operator?

1. React UI error caused by && operator

Here in this example, I need to fetch users’ data from the API, which is used to render a user’s list. If the length of the usersList is 0, then it should not be displayed.

import React from 'react';
import axios from 'axios';

const App = () => {
  const [usersList, setUsersList] = React.useState([]);

  const fetchUsersList = () => {
    axios.get('/api/users')
      .then(response => {
        setList(response.data);
      })
      .catch(error => {
        console.error('Error fetching list:', error);
        setList([]);
      });
  };

  React.useEffect(() => {
    fetchUsersList();
  }, []);

  return (
    usersList.length && (
      <div className="name-list-container">
        {list.map((name) => (
          <div className="name-list-item">{name}</div>
        ))}
      </div>
    )
  );
};

You will notice that when usersList is an empty array, then the page will render a 0 instead of nothing.

2. What we should use instead of && operator?

We should avoid using the && operator if we give up using it. Because && operator makes it easy to make mistakes. We can use 3 ways to avoid this problem.

2.1 Use  !!usersList.length 

We can turn the length check to a boolean value and avoid this error. This time the error will not happen again

// 1. Convert list.length to boolean
!!usersList.length && <Component list={list} />

2.2 Use  !!usersList.usersList.length >= 1

We can use the length of the array into a boolean value and this error will not happen again.

// 2. Controlled by specific logic
usersList.length >= 1 && <Component list={list} />;

2.3 Using ternary expressions

We can use another method to turn it into a boolean value.

// 3. Use ternary expressions and null
usersList.length ? <Component list={list} /> : null;
Tags: && operatorConditional Renderingreact
Admin

Admin

Skilled Blockchain developer with a deep interest in emerging technologies, Also writes well-versed content on the latest news and advancements related to AI, Blockchain, NFTs, and cloud computing. Also, I provide expert insights into the future of technology.

Related Posts

useCallback vs useEffect: What is the main difference between them?
React

useCallback vs useEffect: What is the main difference between them?

by Admin
May 8, 2023
Fix React Router URL's issue with HashRouter
React

Fix React Router URL’s issue with HashRouter

by Admin
May 6, 2023
Programing

What is Virtual DOM in React?

by Admin
April 12, 2023
React

How to Pass Data Child to Parent component in React Js (callbackprops)?

by Admin
May 8, 2023
React

What is React? Advantages and disadvantages of React

by Admin
April 12, 2023
Next Post
PlayStation Showcase 2023 (Sony)

PlayStation Showcase 2023 (Sony): Timing, streaming, and more

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

CinexTech

CinexTech is the premier and most trustworthy resource for all happenings in technology, business, and education news in the world.

  • About
  • Blog
  • Contact
  • Guest Post Guidelines for CinexTech.com
  • Home

© Copyright 2023 - Cinextech.com

No Result
View All Result
  • Home
  • Technology
    • AI
    • ChatGPT
    • Blockchain
    • Metaverse
    • technology-news
  • Business
  • Health
    • quotes
    • Insurance
  • Programing
    • Javascript
    • React
  • Cloud Computing
  • How-To
  • Write for us
  • Blog

© Copyright 2023 - Cinextech.com

Table of Contents

×
    • You might also like
    • useCallback vs useEffect: What is the main difference between them?
    • Fix React Router URL’s issue with HashRouter
  • 1. React UI error caused by && operator
  • 2. What we should use instead of && operator?
      • 2.1 Use  !!usersList.length 
      • 2.2 Use  !!usersList.usersList.length >= 1
      • 2.3 Using ternary expressions
→ Index