Experiencing difficulty in triggering a NextUI Modal by clicking on a NextUI Table Row

In the process of developing my web portfolio, I am utilizing NextJS, TypeScript, and TailwindCSS. A key feature on my site involves displaying a list of books I have read along with my ratings using a NextUI table. To visualize this functionality, you can refer to the table here. Currently, I am working on implementing a new feature where clicking on a row will trigger a Modal displaying my review for that particular book. However, I've encountered an error that reads as follows:

Uncaught TypeError: Cannot convert a Symbol value to a string
    at $eb2240fc39a57fa5$export$bf788dd355e3a401.getFullNode (import.mjs:219:53)
   ...

Despite multiple attempts, I have been unable to resolve this error or find a workaround.

Displayed below is the code responsible for rendering each book as a row in the table, along with the expected modal that should appear upon row selection:

{(item) => {
          return (
            <>
              <TableRow
                key={item.title}
                className='hover:bg-sky-100 hover:dark:bg-gray-950 hover:dark:border-black/40 hover:dark:bg-opacity-30'
                onClick={onOpen}
              >
               ...
              </Modal>
            </>
          )
        }}

For additional context on the code implementation, you can access the complete file here.

Referencing the NextUI documentation for the table and modal components might provide further insights into the issue.

Any assistance or recommendations regarding this matter would be greatly appreciated!

Additional information:

  • React 18
  • Next 14.0.4
  • NextUI-org/react 2.2.9

Answer №1

By switching from the shorthand syntax <>...</> to the more explicit

<React.Fragment>...</React.Fragment>
, I was able to properly enclose multiple elements within a loop. Additionally, I repositioned the key prop to the outermost element to ensure correct identification of each rendered component.

Below is the updated version:

{items.map((item) => (
  <React.Fragment key={item.title}>
    <TableRow
      className='hover:bg-sky-100 hover:dark:bg-gray-950 hover:dark:border-black/40 hover:dark:bg-opacity-30'
      onClick={() => onOpen(item)}
    >
      <TableCell>{item.title}</TableCell>
      <TableCell className="text-center">{item.author}</TableCell>
      <TableCell className="text-center">
        {item.date_read ? item.date_read.toLocaleDateString() : 'N/A'}
      </TableCell>
      <TableCell className="text-center">
        <Rating
          name="star-rating"
          value={typeof item.overall_score === 'number' ? item.overall_score : parseFloat(item.overall_score)}
          precision={0.1}
          readOnly
          size="large"
        />
      </TableCell>
      <TableCell className="text-center">{item.overall_score}</TableCell>
    </TableRow>

    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
      <ModalContent>
        {(onClose) => (
          <>
            <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
            <ModalBody>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit venenatis.
                Pellentesque sit amet hendrerit risus, sed porttitor quam.
              </p>
            </ModalBody>
            <ModalFooter>
              <Button color="danger" variant="light" onPress={onClose}>
                Close
              </Button>
              <Button color="primary" onPress={onClose}>
                Action
              </Button>
            </ModalFooter>
          </>
        )}
      </ModalContent>
    </Modal>
  </React.Fragment>
))}

If you are still encountering errors, it may be related to a specific piece of code within this component. If the issue arose after implementing new logic, consider wrapping it in a useEffect. Alternatively, check your dependencies for any updates that might resolve the problem.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with React Context updating the value properly to be passed to another page

I've been working on an ecommerce application using Nextjs and I'm trying to figure out how to share data between different pages. It seems like passing data using props won't work, so I decided to explore the react context API for the first ...

How to extract a value from a BehaviorSubject within an Angular 6 guard

I have chosen this approach because I have another guard responsible for validating the user based on a token that was previously stored. This is how it was handled in previous versions of rxjs, but now with the latest version you can no longer use map on ...

The significance of zone.js and rxjs within the context of Angular 2

As a newcomer to Angular2, I recently learned about zone.js and rxjs. I'm curious to know if they both serve the same purpose for handling asynchronous tasks, or if each has its own specific role. Can someone explain to me the exact reasons why zone.j ...

Using Object.defineProperty in a constructor has no effect

I recently revamped my three.js project and ran into a peculiar issue where all objects were being rendered with the same geometry and material. Upon further investigation in the debugger, I narrowed down the problem to this constructor: function Geometry ...

Understanding the data types of functions in TypeScript can be quite important for

What type of information is required after the colon : in this specific function? public saveHistory(log: String): "HERE!" { return async (req: Request, res: Response, next: NextFunction): Promise<Response | void> => { try { ...

Implementing Global Value Assignment Post Angular Service Subscription

Is there a way to globally assign a value outside of a method within my app component? This is how my service is structured: import { NumberInput } from '@angular/cdk/coercion'; import { HttpClient } from '@angular/common/http'; import ...

Why is ssr occurring when "client use" is implemented in a tsx file?

After transitioning a project from React to NextJS and working on the login page, I encountered an issue with server-side components not allowing the use of react-hook-form or @hookform/resolvers/yup. To make them work, it was necessary to add 'use cl ...

Leveraging AWS Next.js with EC2 for optimized content caching

My plan involves using Next.js for server-side rendering (SSR), static site generation (SSG), and incremental static regeneration (ISR) on Amazon's EC2, with image storage on an S3 Bucket. Additionally, I intend to implement CloudFront as a content de ...

Show a modal when the axios request is finished

EDIT: After some exploration, I've shared the solution I found in case it helps others facing a similar issue. I'm currently working on building a reusable Bootstrap 5 modal child component within Vue3. The goal is to pass an ID as a prop from t ...

I am facing an issue in my Nextjs project where the Array Object is not being properly displayed

Hi there! I am new to Nextjs and currently learning. I recently created a component called TeamCard which takes imgSrc, altText, title, designation, and socialProfile as parameters. However, when attempting to display the socialProfile object array using m ...

Error encountered in Angular Html2Pdf: Unable to assign the 'adoptedStyleSheets' attribute on 'ShadowRoot' due to DOMException

Looking for assistance in implementing html2pdf with Angular 12 to convert specific parts of an HTML page into a downloadable PDF. ERROR MESSAGE An error occurred while trying to execute the code: index-7a8b7a1c.js:150 Uncaught (in promise) DOMExce ...

Encountering an issue with Next-offline and WorkboxOpts: A message indicating that the parameter 'runtimeCaching' is not supported. Learn how to enable 'runtimeCaching' in next.config.js

Recently, I started using next-offline and came across the section on workbox integration and its recipes. As per the documentation: If you're new to workbox, it's recommended to go through this quick guide -- anything inside of workboxOpts will ...

I'm struggling to grasp the utilization of generics within the http.d.ts module in Node.js code

type RequestHandler< Request extends **typeof IncomingMessage = typeof IncomingMessage**, Response extends **typeof ServerResponse = typeof ServerResponse**, > = (req: InstanceType<Request>, res: InstanceType<Response> ...

Unraveling the complexities of Typescript's Advanced Type NonFunctionPropertyNames

Delving deeper into the realm of advanced types in Typescript, I came across an intriguing type called NonFunctionPropertyNames. This type is designed to extract only the properties of a given object that are not functions. type NonFunctionPropertyNames&l ...

Nextjs is having trouble loading the Infogram script

Struggling to insert an Infogram into my project by pasting the script but it's not working as expected. All other scripts in _app.js are functioning properly, however, this particular script isn't loading the graphic even though it appears when ...

When using TypeScript, how can I effectively utilize the Component property obtained from connect()?

Software Development Environment TypeScript 2.8 React 16 Redux Foo.tsx interface IFooProps{ userId:number } class Foo extends Component<IFooProps>{ render(){ return <p>foo...</p> } } const mapStateToProps = (state: I ...

What is the best way to create a function that can identify and change URLs within a JSON file?

I'm currently working on a function that will replace all URLs in a JSON with buttons that redirect to another function. The modified JSON, complete with the new buttons, will then be displayed on my website. In my component.ts file, the section wher ...

The Angular performance may be impacted by the constant recalculation of ngStyle when clicking on various input fields

I am facing a frustrating performance issue. Within my component, I have implemented ngStyle and I would rather not rewrite it. However, every time I interact with random input fields on the same page (even from another component), the ngStyle recalculate ...

What is it about that that ticks off so many different boxes?

Hey there! I've been working on creating checkboxes within next js that iterate through each filter and its options. Fortunately, I managed to get it up and running smoothly. However, I'm encountering an issue where checking one option in a speci ...

Saving any type of file in SQL Server with a field type of varbinary(max) can be achieved by utilizing Angular with ASP.NET Core to create a REST API

I am currently facing an issue while attempting to save a file, such as an image, in the Microsoft SQL Server Management Studio through asp .NET core for the Rest API. I have managed to create a base64 representation of the file, but I am unsure about the ...