What is the best way to present sorted items on a user interface?

Question

What is the best way to present sorted items on a user interface?

I have a unique Med interface containing properties like drugClass, dosage, and name. Using this interface, I created an array of drugs with different attributes. How can I filter this array by drugClass and then display the filtered data on a web page?

// in Medications.ts
export interface Med {
  dosage: number;
  name: string;
  drugClass: medForm;
  forDog: boolean;
  forCat: boolean;
}

export const medications: Med[] = [
  {
    dosage: 0.03,
    name: "Meloxicam",
    drugClass: "Oral",
    forDog: true,
    forCat: true,
  }, ....// more here

// in page.tsx
import { Med, medications } from "./Medications"; 

export default function Home() {
 const filteredOralData = medications.filter(
    (med) => med.drugClass === "Oral"
  );

return (
<div>
<ul className="list-group">
                {filteredOralData.map((item) => (
                  <li>{item //ERROR: Type 'Med' is not assignable to type 'ReactNode'.ts(2322)
index.d.ts(1450, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>'}</li>
                ))}
              </ul>

</div>

html css reactjs typescript next.js

Answer 1

Answer №1

Issue (clarified)

The problem you are facing arises from attempting to directly render the entire item object within the <li> element in React. However, React requires a valid ReactNode to be rendered, which an object is not. Therefore, we need to extract the specific property we want to display.

Resolution

To resolve this issue, we must specify which property of the item object should be displayed. For example, let's display the name property. See below for the updated code:

import React from 'react';
import { Med, medications } from './Medications';

export default function Home() {
  const filteredOralData = medications.filter((med) => med.drugClass === 'Oral');

  return (
    <div>
      <ul className="list-group">
        {filteredOralData.map((item, index) => (
          <li key={index}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

Modifications made:

Added import React from 'react'; statement to bring in the React library.
Inserted key={index} into each <li> element to assign a unique identifier to every item in the list (as required by React for efficient rendering).
Changed {item} to {item.name} to ensure only the drug name is displayed within the <li> element.

Answer 2

Issue (clarified)

The problem you are facing arises from attempting to directly render the entire item object within the <li> element in React. However, React requires a valid ReactNode to be rendered, which an object is not. Therefore, we need to extract the specific property we want to display.

Resolution

To resolve this issue, we must specify which property of the item object should be displayed. For example, let's display the name property. See below for the updated code:

import React from 'react';
import { Med, medications } from './Medications';

export default function Home() {
  const filteredOralData = medications.filter((med) => med.drugClass === 'Oral');

  return (
    <div>
      <ul className="list-group">
        {filteredOralData.map((item, index) => (
          <li key={index}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

Modifications made:

Added import React from 'react'; statement to bring in the React library.
Inserted key={index} into each <li> element to assign a unique identifier to every item in the list (as required by React for efficient rendering).
Changed {item} to {item.name} to ensure only the drug name is displayed within the <li> element.

Answer 3

Answer №2

This solution actually worked!

<ul className="list-group">
  {filteredOralData.map((item) => (
    <li key={item.name}>
      {/* Display desired information here */}
      Name: {item.name} | Dosage: {item.dosage} | Drug Class: {item.drugClass}
    </li>
  ))}
</ul>

Answer 4

This solution actually worked!

<ul className="list-group">
  {filteredOralData.map((item) => (
    <li key={item.name}>
      {/* Display desired information here */}
      Name: {item.name} | Dosage: {item.dosage} | Drug Class: {item.drugClass}
    </li>
  ))}
</ul>

What is the best way to present sorted items on a user interface?

Answer №1

Issue (clarified)

Resolution

Modifications made:

Answer №2

Similar questions

The TypeScript error code TS2339 is indicating that the 'modal' property is not recognized on the type 'JQuery'

Tips on aligning a v-btn alongside v-expansion-panels on the same row

Using percentages to position Div elements

What are the steps to hosting a Laravel and Inertiajs (React) application on cPanel?

JavaScript/CSS memory matching game

Leveraging custom properties in HTML elements with JavaScript

Tips for setting React state using variables as keys or values

What is the process for launching a TypeScript VS Code extension from a locally cloned Git repository?

Tips for positioning a chat box at the bottom of a v-card's visible area

The NextJS application briefly displays a restricted route component

Choose the dropdown value that corresponds to the name of the subcollection from which to retrieve data

Tips for incorporating the ternary operator in JSX of a React component while utilizing TypeScript?

The external typing file encounters an issue when trying to locate the relative path to its own index.d.ts file

Encountering an error in Angular 8 with the plugin: Unhandled ReferenceError for SystemJS

Utilizing fab-icons with CDN in Next.js version 13.4

Pentagon Silhouette as Header Background

Protractor typescript guide: Clicking an element with _ngcontent and a span containing buttontext

What is the best way to transition this endpoint from JavaScript to TypeScript?

Is it possible to determine the search query if the search term appears within the website URL?

I'd like to know what sets next/router apart from next/navigation