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

When accessing my express backend with passport.js, it seems to be giving a different response on the client side compared to when I access it directly through the server

What is the best way to make the div inside the table cells expand to fill the available space?

trouble displaying strength of passwords in AngularJS

"Introducing a smooth animation effect to shift text alignment to the center

Setting up Why Did You Render with NextJS 12: A step-by-step guide

Create a footer with a centered column orientation

Building a multi-platform desktop application using Angular and Electron integrated with ngx

Potential Bug Detected in Internet Explorer on Mouseenter Event

Confirm Submission Issue in HTML Form

Tips for styling the Button component in the shadcn/ui library for maximum impact

Ways of accessing an array within an if statement

Stop the link height from changing when hovered over

After the recent update to version 4.2.0 of @material-ui/core, unexpected react hook errors have been

The ion-input border seems to be fluctuating as the keyboard appears on the screen

Transforming JSON into object instances with Angular

Error thrown by webpack: Module 'pug' not found when attempting to access get-api

Icon that can be clicked before

The datepicker in Angular Material refuses to open when used within a modal dialog box

Utilize the useState hook to update state when changes occur in the

Are auto-properties supported in TypeScript yet?