Display empty value when no results with extra menu item

When working with TypeScript, it is common to encounter scenarios where you need to display a list of items, but also want to show an empty value or an extra menu item when there are no results. In this blog post, we will explore two different solutions to achieve this functionality.

Solution 1: Using conditional rendering

The first solution involves using conditional rendering to check if there are any results before displaying the list. If there are no results, we can render an empty value or an extra menu item instead.

Here is an example code snippet:


{`import React from 'react';

interface Item {
  id: number;
  name: string;
}

interface Props {
  items: Item[];
}

const List: React.FC = ({ items }) => {
  return (
    
      {items.length ? (
        items.map((item) => (
          {item.name}
        ))
      ) : (
        No results found
      )}
    
  );
};

export default List;`}

In this example, we have a functional component called List that receives an array of items as a prop. We use conditional rendering to check if there are any items in the array. If there are, we map over the items and render each one as a list item. If there are no items, we render a single list item with the text “No results found”.

Solution 2: Using a ternary operator

The second solution involves using a ternary operator to conditionally render either the list of items or the empty value/extra menu item based on the presence of results.

Here is an example code snippet:


{`import React from 'react';

interface Item {
  id: number;
  name: string;
}

interface Props {
  items: Item[];
}

const List: React.FC = ({ items }) => {
  return (
    
      {items.length
        ? items.map((item) => {item.name})
        : No results found
      }
    
  );
};

export default List;`}

In this example, we use a ternary operator to conditionally render either the list of items or the empty value/extra menu item. If there are items in the array, we map over them and render each one as a list item. If there are no items, we render a single list item with the text “No results found”.

Both solutions achieve the desired functionality of displaying an empty value or an extra menu item when there are no results. You can choose the solution that best fits your project’s requirements and coding style.

That’s it for this blog post! We hope you found these solutions helpful in your TypeScript development. Happy coding!

Display empty value when no results with extra menu item