What steps can be taken to hide empty items in a list from being shown?

Question

What steps can be taken to hide empty items in a list from being shown?

When I map over an array of books to display the titles in a list, I encounter an issue with the initial empty string value for the title. This causes the list to render an empty item initially. Below is my book array:

  @observable books = [
    {title:"", owned: false}
  ]

To display the books, I use the following code:

  <div>
        {this.props.store.books.map((b)=>{
            return (
                <ul>
                    <li>{b.title}</li>
                </ul>
            )
        })}
  </div>

I am looking for a solution to prevent the empty title from being displayed.

javascript css reactjs

Answer 1

Answer №1

If you are not interested in displaying the entire content if the title is empty, one option is to use the .filter() method on the array.

<div>
    {this.props.store.books.filter(x => x.title).map((b) => {
        return (
            <ul>
                <li>{b.title}</li>
            </ul>
        )
    })}
</div>

If you prefer to exclude only the title and still show other elements, you could define the <li> tag as a variable that you then render. For example:

<div>
    {this.props.store.books.map((b)=>{
        const title = b.title ? <li>{b.title}</li> : null;
        return (
            <ul>
                {title}
            </ul>
        )
    })}
</div>

Answer 2

If you are not interested in displaying the entire content if the title is empty, one option is to use the .filter() method on the array.

<div>
    {this.props.store.books.filter(x => x.title).map((b) => {
        return (
            <ul>
                <li>{b.title}</li>
            </ul>
        )
    })}
</div>

If you prefer to exclude only the title and still show other elements, you could define the <li> tag as a variable that you then render. For example:

<div>
    {this.props.store.books.map((b)=>{
        const title = b.title ? <li>{b.title}</li> : null;
        return (
            <ul>
                {title}
            </ul>
        )
    })}
</div>

Answer 3

Answer №2

Easily conceal an empty list with the power of CSS3 styling

CSS

ul li:empty {
   display: none;
}

Answer 4

Easily conceal an empty list with the power of CSS3 styling

CSS

ul li:empty {
   display: none;
}

What steps can be taken to hide empty items in a list from being shown?

Answer №1

Answer №2

Similar questions

The execution of ajax within a script being called by another ajax request is not functioning as expected in PHP

Inconsistencies observed during the native JSON import process in JavaScript

The key property is present on the list item, yet the key warning persists

NextJS is throwing an error stating that the function file.endsWith is not recognized as a valid

Using AJAX asynchronously in JavaScript commands synchronization

Comparing XDomainRequest and XMLHttpRequest for IE8 and IE9: A detailed analysis

Creating effective test cases for Angular JS controllers

Unresponsive Radio Buttons in HTML

Displaying a project in the same location using jQuery

Creating a hover effect on a specific area of a map is a useful technique

Issue with host header detected in MERN stack configuration

The usage of conditional props in Material-ui components does not function properly with styled-components

Utilizing LocalStorage in an Ionic application to store data on a $scope

Could someone provide an example to illustrate the concept of "em is relative to the font size and % is relative to the parent element"?

Having difficulty locating audio files within a Next.js project

Looking for assistance with finding a specific value in Firestore?

Show only child elements of a specific type within the parent div

Is there a way to incorporate two different layouts within a single Next.js project?

Leverage JavaScript to retrieve content and generate an iframe

jQuery Masonry now renders "row blocks" as opposed to trying to fit elements into place